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:211 ??????????????????}12 ???????????????}); ??????????????????//?a=1&b=213 ######################------------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:3329 ???????????????????}),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.js18 <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 json17 ????????# 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来进行转换，没有这行也可以，相当于下面的contentType38 {# ?????????????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>ajax-实现注册登录
原文地址：https://www.cnblogs.com/jokerbj/p/8153336.html