ajax知识点介绍：
异步Javascript和XML，用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML），也有可能是json
优点：
1. AJAX使用Javascript技术向服务器发送异步请求；
2. AJAX无须刷新整个页面；
3. 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
$.ajax参数
1 ######################------------data---------################ 2 3 data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式 4 (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。 5 6 function testData() { 7 $.ajax("/test",{ //此时的data是一个json形式的对象 8 data:{ 9 a:1, 10 b:2 11 } 12 }); //?a=1&b=2 13 ######################------------processData---------################ 14 15 processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false， 16 那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString() 17 ,最后得到一个［object，Object］形式的结果。 18 19 ######################------------contentType---------################ 20 21 contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 22 用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据， 23 比如contentType:"application/json"，即向服务器发送一个json字符串： 24 $.ajax("/ajax_get",{ 25 26 data:JSON.stringify({ 27 a:22, 28 b:33 29 }), 30 contentType:"application/json", 31 type:"POST", 32 33 }); //{a: 22, b: 33} 34 35 注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象 36 37 views.py: json.loads(request.body.decode("utf8")) 38 39 40 ######################------------traditional---------################ 41 42 traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]}, 43 traditional为false会对数据进行深层次迭代；
csrf跨站请求伪造三种
1 第一种 2 同一个xml里面，不需要写csrf_token 3 $.ajaxSetup({ 4 data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, 5 }); 6 7 第二种 8 需要写csrf_token 9 <form> 10 {% csrf_token %} 11 </form><br><br><br>$.ajax({<br>...<br>data:{ 12 13 提交时候 ajax data里面的键值对 14 "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(); 15 16 第三种 17 需引用jquery.cookie.js 18 <script src="{% static 'js/jquery.cookie.js' %}"></script> 19 $.ajax({ 20 headers:{"X-CSRFToken":$.cookie('csrftoken')}, 21 })
登陆注册实例
创建django app01项目
无数据库models
1. urls
1 urlpatterns = [ 2 url(r'^admin/', admin.site.urls), 3 url(r'^login/', views.login), 4 url(r'^reg/', views.reg), 5 ]
2. views
1 from django.shortcuts import render,HttpResponse 2 3 # Create your views here. 4 5 6 def login(request): 7 if request.is_ajax(): # 判断是不是ajax提交的数据 8 print(request.body) # b'{"user":"alex","pwd":"123"}' 9 # b'user=alex&pwd=123&csrfmiddlewaretoken=PCLE4jNWOmLcmd5LiY1qrwTWQZLpZdSktwwwPswNKg7DhblKO6X1fBDkB05yoNMm' 10 print(request.POST) # {'user': ['alex'], 'pwd': ['123'], 'csrfmiddlewaretoken': ['PCLE4jNWOmLcmd5LiY1qrwTWQZLpZdSktwwwPswNKg7DhblKO6X1fBDkB05yoNMm']} 11 print(request.GET) # {} 12 13 # user=request.POST.get("user") 14 # pwd=request.POST.get("pwd") 15 16 # import json 17 # s=request.body.decode("utf8") 18 # d=json.loads(s) 19 # print(d.get("user")) 20 # print(d.get("pwd")) 21 return HttpResponse("OK") 22 23 return render(request,"index.html") 24 25 26 27 def reg(request): 28 if request.is_ajax(): 29 print(request.POST,"=======") 30 31 return HttpResponse("OK") 32 33 return render(request,"reg.html")
3. index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 7 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> 8 </head> 9 <body> 10 11 {##} 12 {#<form action="">#} 13 {# 自动生成一个input标签#} 14 {# {% csrf_token %}#} 15 {# <p>姓名：<input type="text" id="user"></p>#} 16 {# <p>密码：<input type="password" id="pwd"></p>#} 17 {# <input type="button" value="submit" id="button">#} 18 {#</form>#} 19 20 <button class="send_Ajax">send_Ajax</button> 21 22 23 24 {#<script>#} 25 {# $(":button").click(function () {#} 26 {# 第一种方式，表单里面不需要写{% csrf_token %}#} 27 {# $.ajaxSetup({#} 28 {# data: {csrfmiddlewaretoken: '{{ csrf_token }}'}#} 29 {# });#} 30 {##} 31 {# $.ajax({#} 32 {# url:"/login/",#} 33 {# type:"POST",#} 34 {# data:JSON.stringify({ 传送到前端的是json对象#} 35 {# user:$("#user").val(),#} 36 {# pwd:$("#pwd").val(),#} 37 # 预期服务器返回的数据类型，ajax会根据服务器返回的content Type来进行转换，没有这行也可以，相当于下面的contentType 38 {# dataType:"json",} 39 {# 第二种方式#} 40 {# csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()#} 41 {# }), // 'user=alex&pwd=123'#} 42 {# //contentType:"application/x-www-form-urlencoded", // (默认)#} 43 {# 第三种方式，数据都在body里面#} 44 {# headers:{"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},#} 45 {# 同上#} 46 {# headers:{"X-CSRFToken":$.cookie("csrftoken")},#} 47 {# contentType:"application/json", 预期服务器返回的数据类型#} 48 {# success:function (data) {#} 49 {# console.log(data)#} 50 {# }#} 51 {# })#} 52 {# })#} 53 {#</script>#} 54 55 56 <script> 57 $('#butsend_Ajaxon').click(function () { 58 {# $.ajaxSetup({#} 59 {# data:{csrfmiddlewaretoken: '{{ csrf_token }}'}#} 60 {# data:{csrfmiddlewaretoken:'{{ csrf_token }}'}#} 61 {# });#} 62 63 $.ajax({ 64 url:'/login/', 65 type:'POST', 66 date:{ 67 user:'alex', 68 pwd:'123' 69 {# user:$('#user').val(),#} 70 {# pwd:$('#pwd').val()#} 71 }, 72 {# csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#} 73 {# contentType:'application/x-www-form-urlencoded',#} 74 success:function (data) { 75 console.log(data) 76 } 77 }) 78 }) 79 </script> 80 81 </body> 82 </html>
通过注册页面来看 jQuery.serialize()
serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。
该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串
该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。
serialize()函数的返回值为String类型，返回将表单元素编码后的可用于表单提交的文本字符串。
4. reg.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 7 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> 8 </head> 9 <body> 10 11 12 <form id="myForm" action="/reg/" method="post"> 13 {% csrf_token %} 14 <input name="uid" type="hidden" value="1" /> 15 <input id=user name="username" type="text" value="张三" /> 16 <input name="password" type="text" value="123456" /> 17 <select name="grade" id="grade"> 18 <option value="1">一年级</option> 19 <option value="2">二年级</option> 20 <option value="3" selected="selected">三年级</option> 21 <option value="4">四年级</option> 22 <option value="5">五年级</option> 23 <option value="6">六年级</option> 24 </select> 25 <input name="sex" type="radio" checked="checked" value="1" />男 26 <input name="sex" type="radio" value="0" />女 27 <input name="hobby" type="checkbox" checked="checked" value="1" />游泳 28 <input name="hobby" type="checkbox" checked="checked" value="2" />跑步 29 <input name="hobby" type="checkbox" value="3" />羽毛球 30 <input name="btn" id="btn" type="button" value="点击" /> 31 32 </form> 33 34 35 <script> 36 $("#btn").click(function () { 37 38 $.ajax({ 39 url:"/reg/", 40 type:"POST", 41 //data:$("#myForm").serialize(), #序列化<form>内的所有表单元素 42 data:$(":checkbox,:radio,#user,[name='csrfmiddlewaretoken']").serialize(), # 直接对部分表单元素进行序列化。 43 success:function (data) { 44 console.log(data) 45 } 46 47 }) 48 49 50 }) 51 </script> 52 <script> 53 {# $(":button").click(function () {#} 54 {##} 55 {# $.ajax({#} 56 {# url:"/login/",#} 57 {# type:"POST",#} 58 {# data:JSON.stringify({#} 59 {# user:$("#user").val(),#} 60 {# pwd:$("#pwd").val()#} 61 {# //csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()#} 62 {# })#} 63 {# , // 'user=alex&pwd=123'#} 64 {# //contentType:"application/x-www-form-urlencoded", // (默认)#} 65 {# //headers:{"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},#} 66 {# headers:{"X-CSRFToken":$.cookie("csrftoken")},#} 67 {# contentType:"application/json",#} 68 {# success:function (data) {#} 69 {# console.log(data)#} 70 {# },#} 71 {##} 72 {# })#} 73 {# })#} 74 </script> 75 </body> 76 </html>