Django之初始Ajax

from:Django-Ajax

Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

 ajax基本格式：

$.ajax({
    url:"/book/login/",     #提交的url
    type:"POST",            #请求方法
    data:{　　　　　　　　　　　#请求数据
    },
    success:function (data) {  #ajax的回调函数，data是前端返回的数据(一般数字典格式，需要反序列化)
    }
})

例子：

 $.ajax({
                url:"/book/login/",
                type:"POST",
                data:{
                    "user":user,
                    "pwd":pwd,
                },
                success:function (data) {
                    data=JSON.parse(data); {#json数据反序列#}
                    if (data["flag"]){
                        $(".inFo").html("成功登录！").css("color","red");
                        setTimeout(function () {
                               location.href="/book/show"
                            },2000)
                    }
                    else {
                        $(".inFo").html("用户名或者密码错误！").css("color","red");
                        setTimeout(function () {
                               $(".inFo").html("")
                            },2000)
                    }
                }
            })

一、 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跨站请求伪造

1、ajax数据返回

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

2、form表单

<form>
{% csrf_token %}
</form><br><br><br>$.ajax({<br>...<br>data:{
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();
1
}<br>})

3、js返回

<script src="{% static 'js/jquery.cookie.js' %}"></script>
$.ajax({ 
headers:{"X-CSRFToken":$.cookie('csrftoken')},
})