Ajax

简介

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

特点

局部刷新:

　　这一特点给用户的感受是在不知不觉中完成请求和响应过程

异步提交:

　　客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

优缺点:

• AJAX使用Javascript技术向服务器发送异步请求；
• AJAX无须刷新整个页面；
• 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高
• 但是,请求频繁

jquery的json

JSON.parse():     用于将一个 JSON 字符串转换为 JavaScript 对象　
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ;   // 错误
console.log(JSON.parse('[12,undefined]')) ;   // 错误



JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。　
eg:  console.log(JSON.stringify({'name':"egon"})) ; 

　　

jquery实现的ajax

无参请求

<script>

    // ajax的无参请求
   $(".s1").click(function () {

      // 当标签点击时触发ajax事件

   $.ajax({
           url:"/ajax_handle/", # 处理请求的url
           type:"get",              # 请求的方式
           success:function (data) { # 成功时执行的回调函数,data值为视图函数(一般情况下
　　　　　　　　　　　　　　　　　　　　　　　　　　HttpResponse)返回值,
              $(".name").html(data); # 做出处理
           }
       })

   });
</script>

发送参数

 $(".cal").click(function () {

        $.ajax({
            url:'/cal/', # 请求提交路径
            # 请求方式默认为get
            data:{"num1":$("#n1").val(),"num2":$("#n2").val()}, # 请求传递的数据,后端取值时根据        
                                                                                            # data的键取
            success:function (data) { # 回调函数
                $("#sum").val(data)
            }
        })

    })

 

其他的参数

请求参数
######################------------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对象

             另外Django在后台取数据时在request.POST是取不到的,数据位于request.body中,以字节的形式存储.

views.py: json.loads(request.body.decode("utf8")) ######################------------traditional---------################ traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]}, traditional为false会对数据进行深层次迭代； 响应参数 dataType： 预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。 默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换； 比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容 进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式 的对象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用 data Type。 dataType的可用值：html｜xml｜json｜text｜script 
 

　　

post请求的注意事项

<script>
$("#user").blur(function () {

        $.ajax({
            url:"/jiaoyan_user/",
            type:"post",
            data:{"user":$("#user").val(),
                   "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()}, 
                   # 在Django中请求需要验证csrf,data中也要传递csrf的键值对
            success:function (data) {
                var data=JSON.parse(data); # 将拿到的数据反序列化
                if(data.is_reg){
                    $("#user").next().html("该用户已经注册").css("color","red")
                }
            }
        })

    })

</script>

 Django的post请求验证除了html中的csrfmiddlewaretoken还存在于cookie中,关于验证的中间件若是找不到请求中的csrfmiddlewaretoken便会去请求头中查找

所以我们可以通过ajax设置请求头,来通过Django的验证

# 首先要导入js/jquery.cookie.js
<script src="{% static 'js/jquery.cookie.js' %}"></script>

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

　　

 

Ajax上传文件

# form表单上传文件
<form action="/upload_file/" method="post" enctype="multipart/form-data">
    <p><input type="file" name="upload_file_form"></p>
    <input type="submit">
</form>

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

<h3>Ajax上传文件</h3>

<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>

<button id="upload_button">提交</button>
{#注意button标签不要用在form表单中使用#}

<script>
    $("#upload_button").click(function(){

        var username=$("#username").val();
        var upload_file=$("#upload_file_ajax")[0].files[0];  // input框中的文件对象
        // 向form对象中添加键值对
        var formData=new FormData();
    
        formData.append("username",username);
        formData.append("upload_file_ajax",upload_file);


        $.ajax({
            url:"/upload_file/",
            type:"POST",
            data:formData,
            contentType:false, // 必须将这两项设置为false
            processData:false, //

            success:function(){
                alert("上传成功!")
            }
        });


    })
</script>