接上篇随笔。继续介绍ajax的使用。
上篇友情连接：http://www.cnblogs.com/liluning/p/7831169.html
本篇导航：
- Ajax响应参数
- csrf 跨站请求伪造
- jQuery.serialize()
- 上传文件
一、Ajax响应参数
上篇最后介绍了ajax的请求参数现在补充一个响应参数
dataType： ?预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。 默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换； 比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式的对象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用 data Type。dataType的可用值：html｜xml｜json｜text｜script
简单说就是告诉服务器需要返回什么数据类型
二、csrf 跨站请求伪造
我们之前用form表单POST提交时如果没有｛% csrf_token %｝客户端收不到数据会报错同样用ajax POST提交数据也有同样的错误那么准么解决呢？
1、方法一
$.ajaxSetup({ ???data: {csrfmiddlewaretoken: ‘{{ csrf_token }}‘ },});$.ajax({ ??... })缺点：当js与html文件分离时，{{ csrf_token }} 无法被渲染失去作用，用方法一必须将js和html写在一起
2、方法二
{% csrf_token %}$.ajax({ ???url:"", ???type:"POST", ???data:{ ???????csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(), ?????}})缺点：html body标签中必须存在{% csrf_token %}
3、方法三
//<script src="{% static ‘js/jquery.cookie.js‘ %}"></script> 需要下载对应文件<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>$.ajax({ ???headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)},})缺点：基本通用哈哈哈
三、jQuery.serialize()
serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。serialize()函数常用于将表单内容序列化，以便用于AJAX提交。该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。
简单总结：就是说我们如果有很多input标签内容需要提交总不会全部写在data中罗列出来吧，这就用到serialize()函数了可以帮我们一次性提交数据到客户端。
例如：
<form name="myForm" action="http://www.365mini.com" method="post"> ???<input name="uid" type="hidden" value="1" /> ???<input name="username" type="text" value="张三" /> ???<input name="password" type="text" value="123456" /> ???<select name="grade" id="grade"> ???????<option value="1">一年级</option> ???????<option value="2">二年级</option> ???????<option value="3" selected="selected">三年级</option> ???????<option value="4">四年级</option> ???????<option value="5">五年级</option> ???????<option value="6">六年级</option> ???</select> ???<input name="sex" type="radio" checked="checked" value="1" />男 ???<input name="sex" type="radio" value="0" />女 ???<input name="hobby" type="checkbox" checked="checked" value="1" />游泳 ???<input name="hobby" type="checkbox" checked="checked" value="2" />跑步 ???<input name="hobby" type="checkbox" value="3" />羽毛球 ???<input name="btn" id="btn" type="button" value="点击" /></form>
对<form>元素进行序列化可以直接序列化其内部的所有表单元素。
序列化所有：$("form").serialize()
uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
部分序列化：$(":text, select, :checkbox").serialize()
username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
view视图函数如何取值呢？和以前的POST请求相同
request.POST.get("name") ?//input中的name属性四、上传文件
1、普通上传文件
1）template
<form action="/upload/" method="post" enctype="multipart/form-data"> ???{% csrf_token %} ???<p>用户名<input type="text" name="user"></p> ???<p>头像<input type="file" name="avatar"></p> ???<input type="submit"></form>enctype属性不可缺少
2）view
def upload(request): ???if request.method=="POST": ???????print("POST", request.POST) ???????print("FILES",request.FILES) ?# FILES <MultiValueDict: {}> ???????file_obj=request.FILES.get("avatar") ???????print(file_obj.name,"-----") ???????with open(file_obj.name,"wb") as f: ???????????for i in file_obj: ???????????????f.write(i) ???????return HttpResponse("成功") ???return render(request,"upload.html")这是将上传的文件写入到本地file_obj的name方法可以取到文件名称
3、Ajax(FormData)
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
1）template
<body><form action="" id="s1"> ???<p>姓名<input type="text"></p> ???<p>密码<input type="password"></p> ???<p>头像<input type="file" id="upload_avatar"></p></form><p><button class="Ajax_send">提交</button><span class="login_error"></span></p><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script><script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script><script> ????function foo() { ???????$(".login_error").html("") ???} ???$(".Ajax_send").click(function () { ???????var formData=new FormData(); ???????formData.append("username",$(":text").val()); ???????formData.append("password",$(":password").val()); ???????formData.append("avatar",$("#upload_avatar")[0].files[0]); ???????$.ajax({ ???????????url:"/get_ajax/", ???????????type:"POST", ???????????headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}, ???????????data:formData, ???????????contentType:false, ???????????processData:false, ???????????success:function (data) { ???????????????var data=JSON.parse(data); ???????????????if(!data["flag"]){ ???????????????????$(".login_error").html("用户名或者密码错误") ???????????????????setTimeout(foo,3000) ???????????????} ???????????} ???????}) ???})</script></body>2）view
def get_ajax(request): ???username=request.POST.get("username") ???password=request.POST.get("password") ???print("FIFLE",request.FILES) ???print("POST",request.POST) ???response={"flag":False} ???if username=="bjd" and password=="123": ???????response["flag"]=True ???import json ???return HttpResponse(json.dumps(response))71、django之Ajax续
原文地址：http://www.cnblogs.com/liluning/p/7834415.html