一、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(\'上传成功\')