一、ajax
ajax（Asynchronous JavaScript And XML）：异步JavaScript和XML，即使用JavaScript语句与服务器进行异步交互，传输的数据为XML（也可以是json数据）。实际上就是在JavaScript语句里用ajax可以向服务器发送请求。
两大特点：
1，异步交互
2，页面局部刷新
语法：
基于jQuery：
<script>
$(‘.cc‘).click(function(){ ???????#当我们点击‘.cc’这个类的时候就会触发ajax请求 $.ajax({ ??????????????url:‘/name/‘, ?????#请求的路径 ??????????????type:‘post‘, ??????#请求的方式 ??????????????data:{csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val(),user:$(‘[name="user"]‘).val()}, ?????????#请求的数据 ??????????????success:function (data) { ???????????????????????#这是请求成功后的回调函数 ??????????????????if (data.name){ ??????????????????????$(‘.c1‘).html(‘用户名已存在‘); ??????????????????????$(‘.login‘).addClass(‘hide‘) ??????????????????} ??????????????} ??????????}) ??????????});</script>
1，基于ajax请求的注册页面
1.1 register.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="/static/css/bootstrap.css"> ???<script src="/static/jquery-3.3.1.js"></script> ???<script src="/static/js/bootstrap.js"></script></head><body>{% csrf_token %}<div class="container"> ???{% csrf_token %} ???<div class="row"> ???????<div class="col-md-5"> ???????????<div style="color: blue;font-size: 20px">注册页面</div> ???????????<div> ???????????????名字 <input type="text" name="user" class="form-control"><span class="c1" style="color: red"></span> ???????????</div> ???????????<div > ???????????????密码 <input type="password" name="pwd" class="form-control"><span class="c2" style="color: red"></span> ???????????</div> ???????????<button class="register">注册</button> ???????</div> ???</div></div> ???<script> ???????$(‘[name="user"]‘).focus(function () { ???????????$(‘.c1‘).html(‘‘); ???????????$(‘.register‘).removeClass(‘hide‘) ???????}); ???????$(‘[name="pwd"]‘).focus(function () { ???????????$(‘.c2‘).html(‘‘); ???????????$(‘.register‘).removeClass(‘hide‘) ???????}); ??????$(‘[name="user"]‘).blur(function () { ??????????$.ajax({ ??????????????url:‘/name/‘, ??????????????type:‘post‘, ??????????????data:{csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val(),user:$(‘[name="user"]‘).val()}, ??????????????success:function (data) { ??????????????????if (data.name){ ??????????????????????$(‘.c1‘).html(‘用户名已存在‘); ??????????????????????$(‘.register‘).addClass(‘hide‘) ??????????????????} ??????????????} ??????????}) ??????????}); ???????$(‘[name="pwd"]‘).blur(function () { ???????????var pwd=$(this).val(); ???????????if (pwd.length < 10){ ???????????????$(‘.c2‘).html(‘长度小于10‘); ???????????????$(‘.register‘).addClass(‘hide‘) ???????????} ??????????}); ???????$(‘.register‘).click(function () { ???????????var name = $(‘[name="user"]‘).val(); ???????????var pw = $(‘[name="pwd"]‘).val(); ???????????$.ajax({ ???????????????url: ‘/registr/‘, ???????????????type: ‘post‘, ???????????????data: {csrfmiddlewaretoken: $(‘[name="csrfmiddlewaretoken"]‘).val(), user: name, pwd: pw}, ???????????????success: function (data) { ???????????????????if (data.state) { ???????????????????????location.href = ‘/login/‘ ???????????????????} ???????????????????else { ???????????????????????$(‘p‘).html(‘注册不成功‘) ???????????????????} ???????????????} ???????????}) ???????}) ???</script></body>1.2 views.py
def registr(request): ???if request.method==‘GET‘: ???????return render(request, ‘registr.html‘) ???else: ???????dic={‘state‘:None} ???????name=request.POST.get(‘user‘) ???????pwd=request.POST.get(‘pwd‘) ???????obj=UserInfo.objects.create(name=name,pwd=pwd) ???????if obj: ???????????dic[‘state‘]=True ???????return JsonResponse(dic)def name(request): ???dic={‘name‘:None} ???name=request.POST.get(‘user‘) ???obj=UserInfo.objects.filter(name=name).first() ???if obj : ???????dic[‘name‘]=True ???return JsonResponse(dic)1.3 呈现出来的页面
当我们在名字栏输入数据后并且失去焦点后，就会触发一个ajax请求，它会把写在名字栏的数据发到服务器，服务器从数据库判断是否用户名已经存在，然后给ajax返回一个结果。这整个过程中，页面是不会刷新的。只是通过JavaScript在页面上添加节点而已
二、文件上传
1,请求头contentType：指的请求体的打包方式，总共有三种类型
1.1 application/x-www-form-urlencoded
这是post请求方式最常见的打包方式，如果不进行设置，都会默认这种打包方式。浏览器的原生form表单，如果不设置enctype属性，就默认这种方式打包数据。
user=alex&pwd=123 ???这就是这种方式打包后的数据结构
1.2 multipart/from-data
基于form表单上传文件，就必须让form表单的enctype等于multipart/form-data
基于ajax上传文件时，我们就要用到Formdata类
$(‘.submit‘).click(function () { ???????????var formdata=new FormData(); ???????????formdata.append(‘file‘,$(‘.file‘)[0].files[0]); ????#插入上传文件的内容 ???????????$.ajax({ ???????????????url:‘/file/‘, ???????????????type:‘post‘, ???????????????contentType:false, ??????#这一句和下一句是必须加上的 ???????????????processData:false, ???????????????data:formdata, ???????????????success:function (data) { ???????????????????$(‘.c1‘).html(data) ???????????????} ???????????}) ???????})1.3 application/json
在用ajax请求时，可以把contentType改成json，但此时的数据类型就必须json数据类型
如果不用Json类型打包的话，ajax也会默认urlencoded模式打包，数据书写格式为：
data：{user:‘hh‘,pwd:123}
但当设置contentType=‘json‘，此时数据打包方式就变了，数据必须是json格式，所以现在该如下面这样写
data：JSON.strinigfy({user:‘hh‘,pwd:123})
2，基于form表单的文件上传
2.1 HTML文件
<form action="" method="post" enctype="multipart/form-data"> ???????{% csrf_token %} ???????<input type="file" name="file"> ???????<input type="submit"> ???</form>2.2 视图
def file(request): ???if request.method==‘GET‘: ???????return render(request,‘file.html‘) ???else: ???????file_obj=request.FILES.get(‘file‘) ???????name=file_obj.name ???????with open(os.path.join(‘imgs‘,name),‘wb‘) as f: ???????????for line in file_obj: ???????????????f.write(line) ???????return HttpResponse(‘上传成功‘)
3，基于ajax的文件上传
3.1 HTML文件
<input type="file" class="file"> ???<input type="button" class="submit" value="submit"> ???<p class="c1"></p> ???<script> ???????$(‘.submit‘).click(function () { ???????????var formdata=new FormData(); ???????????formdata.append(‘file‘,$(‘.file‘)[0].files[0]); ???????????$.ajax({ ???????????????url:‘/file/‘, ???????????????type:‘post‘, ???????????????contentType:false, ???????????????processData:false, ???????????????data:formdata, ???????????????success:function (data) { ???????????????????$(‘.c1‘).html(data) ???????????????} ???????????}) ???????}) ???</script>3.2 视图
def file(request): ???if request.method==‘GET‘: ???????return render(request,‘file.html‘) ???else: ???????file_obj=request.FILES.get(‘file‘) ???????name=file_obj.name ???????with open(os.path.join(‘imgs‘,name),‘wb‘) as f: ???????????for line in file_obj: ???????????????f.write(line) ???????return HttpResponse(‘上传成功‘)