ajax-简介和实现注册登录

ajax知识点介绍：

异步Javascript和XML，用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML），也有可能是json

优点：

　　1. AJAX使用Javascript技术向服务器发送异步请求；

　　2. AJAX无须刷新整个页面；

　　3. 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

$.ajax参数

 ######################------------data---------################

        data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式

              (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。

              function testData() {

                $.ajax("/test",{     //此时的data是一个json形式的对象

                   data:{

                     a:1,

                     b:2

                   }

                });                   //?a=1&b=2

 ######################------------processData---------################

 processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，

              那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()

              ,最后得到一个［object，Object］形式的结果。

 ######################------------contentType---------################

 contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

              用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，

              比如contentType:"application/json"，即向服务器发送一个json字符串：

                $.ajax("/ajax_get",{

                   data:JSON.stringify({

                        a:22,

                        b:33

                    }),

                    contentType:"application/json",

                    type:"POST",

                });                          //{a: 22, b: 33}

              注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象

              views.py:   json.loads(request.body.decode("utf8"))

 ######################------------traditional---------################

 traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},

               traditional为false会对数据进行深层次迭代；

csrf跨站请求伪造三种

 第一种

 同一个xml里面，不需要写csrf_token

 $.ajaxSetup({

     data: {csrfmiddlewaretoken: '{{ csrf_token }}' },

 });

 第二种

 需要写csrf_token

 <form>

 {% csrf_token %}

 </form><br><br><br>$.ajax({<br>...<br>data:{

 提交时候 ajax data里面的键值对

 "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();

 第三种

 需引用jquery.cookie.js

 <script src="{% static 'js/jquery.cookie.js' %}"></script>

 $.ajax({

 headers:{"X-CSRFToken":$.cookie('csrftoken')},

 })

登陆注册实例

创建django app01项目

无数据库models

1. urls

 urlpatterns = [

     url(r'^admin/', admin.site.urls),

     url(r'^login/', views.login),

     url(r'^reg/', views.reg),

 ]

2. views

 from django.shortcuts import render,HttpResponse

 # Create your views here.

 def login(request):

     if request.is_ajax(): # 判断是不是ajax提交的数据

         print(request.body) # b'{"user":"alex","pwd":"123"}'

         # b'user=alex&pwd=123&csrfmiddlewaretoken=PCLE4jNWOmLcmd5LiY1qrwTWQZLpZdSktwwwPswNKg7DhblKO6X1fBDkB05yoNMm'

         print(request.POST) # {'user': ['alex'], 'pwd': ['123'], 'csrfmiddlewaretoken': ['PCLE4jNWOmLcmd5LiY1qrwTWQZLpZdSktwwwPswNKg7DhblKO6X1fBDkB05yoNMm']}

         print(request.GET)  # {}

         # user=request.POST.get("user")

         # pwd=request.POST.get("pwd")

         # import json

         # s=request.body.decode("utf8")

         # d=json.loads(s)

         # print(d.get("user"))

         # print(d.get("pwd"))

         return HttpResponse("OK")

     return render(request,"index.html")

 def reg(request):

     if request.is_ajax():

         print(request.POST,"=======")

         return HttpResponse("OK")

     return render(request,"reg.html")

3. index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <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>

 </head>

 <body>

 {##}

 {#<form action="">#}

 {#    自动生成一个input标签#}

 {#    {% csrf_token %}#}

 {#    <p>姓名：<input type="text" id="user"></p>#}

 {#    <p>密码：<input type="password" id="pwd"></p>#}

 {#    <input type="button" value="submit" id="button">#}

 {#</form>#}

 <button class="send_Ajax">send_Ajax</button>

 {#<script>#}

 {#    $(":button").click(function () {#}

 {#        第一种方式，表单里面不需要写{% csrf_token %}#}

 {#        $.ajaxSetup({#}

 {#          data: {csrfmiddlewaretoken: '{{ csrf_token }}'}#}

 {#        });#}

 {##}

 {#        $.ajax({#}

 {#            url:"/login/",#}

 {#            type:"POST",#}

 {#            data:JSON.stringify({   传送到前端的是json对象#}

 {#                user:$("#user").val(),#}

 {#                pwd:$("#pwd").val(),#}

             # 预期服务器返回的数据类型，ajax会根据服务器返回的content Type来进行转换，没有这行也可以，相当于下面的contentType

 {#              dataType:"json",}

 {#                第二种方式#}

 {#                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()#}

 {#            }),  // 'user=alex&pwd=123'#}

 {#            //contentType:"application/x-www-form-urlencoded",  // (默认)#}

 {#            第三种方式，数据都在body里面#}

 {#            headers:{"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},#}

 {#            同上#}

 {#            headers:{"X-CSRFToken":$.cookie("csrftoken")},#}

 {#            contentType:"application/json", 预期服务器返回的数据类型#}

 {#            success:function (data) {#}

 {#                 console.log(data)#}

 {#            }#}

 {#        })#}

 {#    })#}

 {#</script>#}

 <script>

     $('#butsend_Ajaxon').click(function () {

 {#        $.ajaxSetup({#}

 {#            data:{csrfmiddlewaretoken: '{{ csrf_token }}'}#}

 {#            data:{csrfmiddlewaretoken:'{{ csrf_token }}'}#}

 {#        });#}

         $.ajax({

             url:'/login/',

             type:'POST',

             date:{

                 user:'alex',

                 pwd:''

 {#                user:$('#user').val(),#}

 {#                pwd:$('#pwd').val()#}

             },

 {#            csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#}

 {#            contentType:'application/x-www-form-urlencoded',#}

             success:function (data) {

                 console.log(data)

             }

         })

     })

 </script>

 </body>

 </html>

通过注册页面来看 jQuery.serialize()

serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。

该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串

该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

serialize()函数的返回值为String类型，返回将表单元素编码后的可用于表单提交的文本字符串。

4. reg.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <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>

 </head>

 <body>

 <form id="myForm" action="/reg/" method="post">

     {% csrf_token %}

     <input name="uid" type="hidden" value="" />

     <input id=user name="username" type="text" value="张三" />

     <input name="password" type="text" value="" />

     <select name="grade" id="grade">

         <option value="">一年级</option>

         <option value="">二年级</option>

         <option value="" selected="selected">三年级</option>

         <option value="">四年级</option>

         <option value="">五年级</option>

         <option value="">六年级</option>

     </select>

     <input name="sex" type="radio" checked="checked" value="" />男

     <input name="sex" type="radio" value="" />女

     <input name="hobby" type="checkbox" checked="checked" value="" />游泳

     <input name="hobby" type="checkbox" checked="checked" value="" />跑步

     <input name="hobby" type="checkbox" value="" />羽毛球

     <input name="btn" id="btn" type="button" value="点击" />

 </form>

 <script>

     $("#btn").click(function () {

         $.ajax({

             url:"/reg/",

             type:"POST",

             //data:$("#myForm").serialize(),  #序列化<form>内的所有表单元素

             data:$(":checkbox,:radio,#user,[name='csrfmiddlewaretoken']").serialize(), # 直接对部分表单元素进行序列化。

             success:function (data) {

                 console.log(data)

             }

         })

     })

 </script>

 <script>

 {#    $(":button").click(function () {#}

 {##}

 {#        $.ajax({#}

 {#            url:"/login/",#}

 {#            type:"POST",#}

 {#            data:JSON.stringify({#}

 {#                user:$("#user").val(),#}

 {#                pwd:$("#pwd").val()#}

 {#                //csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()#}

 {#            })#}

 {#            ,  // 'user=alex&pwd=123'#}

 {#            //contentType:"application/x-www-form-urlencoded",  // (默认)#}

 {#            //headers:{"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},#}

 {#            headers:{"X-CSRFToken":$.cookie("csrftoken")},#}

 {#            contentType:"application/json",#}

 {#            success:function (data) {#}

 {#                 console.log(data)#}

 {#            },#}

 {##}

 {#        })#}

 {#    })#}

 </script>

 </body>

 </html>