Django中的Ajax详解

Posted pyspark

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django中的Ajax详解相关的知识,希望对你有一定的参考价值。

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

同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

一.AJAX常见应用情景

当我们在百度中输入一个“老字后,会马上出现一个下拉列表!列表中显示的是包含字的4个关键字。

其实这里就使用了AJAX技术!当文件框发生了输入变化时,浏览器会使用AJAX技术向服务器发送一个请求,查询包含字的前10个关键字,然后服务器会把查询到的结果响应给浏览器,最后浏览器把这4个关键字显示在下拉列表中。

  • 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
  • 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!技术分享图片

 

当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为zhangSan的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示用户名已被注册!

  • 整个过程中页面没有刷新,只是局部刷新了;
  • 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;

优点:

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

二.$.ajax参数

我们首先来看一个常见的ajax请求的例子,该例子使用ajax来发送点赞请求:

$(document).ready(function () {
    $(".diggit").click(function () {
    //向服务端发送当前的article_id,是否点赞或者踩灭:is_up
    // 既然要发送文章id,因此我们需要在article_detail.html中新建一个标签,然后用来存放文章id
    //首先需要判断用户是否已经登入
    // <div class="info" article_id="{{ article_detail_obj.article.nid }}" user_name="{{ article_detail_obj.article.user.username }}"></div>
    //如果自定义属性user_name有值那就说明用户已经登入,那我就直接发送Ajax请求
    if($(".info").attr("user_name")){
        $.ajax({
            url:"/users/up_down/",
            type: "post",
            data: {
                is_up:"True",
                article_id: $(".info").attr("article_id"),
                csrfmiddlewaretoken: $("input[name=‘csrfmiddlewaretoken‘]").val()
            },
            success:function (data) {
                // up_down_response = {"status": True, "is_repeat": None}
                // 判断status的状态,为True则点赞成功,那么将当前的点赞数+1,并且打印点赞成功的消息
                console.log(data);  // {status: false, is_repeat: true}
                if(data.status){
                     current_up_count = parseInt($("#digg_count").text());
                     current_up_count += 1;
                     $("#digg_count").html(current_up_count);
                    setTimeout(function () {
                        $(".dig_message").html("恭喜您点赞成功").css("color", "red")
                    }, 3000)
                }
                else if(data.is_repeat){
                    setTimeout(function () {
                        $(".dig_message").html("抱歉,不能重复点赞").css("color", "red")
                    }, 3000)
                }
            }
        })
    }
    // 用户未登入
    else {
        console.log(location.pathname);//拿到的是路径部分
        setTimeout(function () {
            $(".dig_message").html("抱歉,您还没有登入,不能进行点赞,3秒后将跳转到登入页面").css("color", "red")
        }, 3000);
        location.href = "/login/?next=" + location.pathname
    }

    });
});

【01】$.ajax的请求参数

 

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

       data: 当前ajax请求要携带的数据,是一个json的object对象,也就是一个json对象
       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,即预处理;如果设置为false,
             那么对data:{a:1,b:2}会调用json对象的toString()方法,即{a:1,b:2}.toString()
             ,最后得到一个[object,Object]形式的结果。
            
######################------------contentType---------################

contentType:默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
即告诉服务器,我客户端使用的数据编码格式是urlencoded:urlencoded:?a=1&b=2;
如果想以其他方式提交数据,比如contentType:"application/json",即客户端告诉服务器,我发送的是一个json字符串:

这里一定要注意,一旦设定了contentType:"application/json",那么我们发送给服务器端的数据data必须就是一个json字符串,不能
是json对象,要不然会报错,这也就是为什么我们需要使用JSON.stringify来将json对象序列化为一个json字符串的原因了!
               $.ajax("/ajax_get",{
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

    当客户端设定了我发送给服务端的是json字符串时,那么服务端拿到数据肯定需要将数据进行反序列化为一个python字符串
    注意此时如果我们设定了客户端使用的是POST方式发送,那么我们在服务端取数据的时候就应该从请求体中拿出数据:
    request.body.decode("utf8"),取出的是一个字节字符串,然后使用json.loads进行反序列化成Python中的对象
             views.py:   json.loads(request.body.decode("utf8"))


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

traditional:一般是我们的data数据有数组时会用到 :data:{a:22,b:33,c:["x","y"]},
              traditional为false会对数据进行深层次迭代;  

 

 

 

响应参数:dataType

dataType的功能: 设定HttpHeader中“Accept”域的内容,告诉服务器浏览器可以想要返回的数据格式类型,同时JQuery也会根据该类型对返回的数据进行相应的格式转换,例如客户端设定dataType的值为:"json",表示我告诉服务端,你返回给我的数据必须是json格式的字符串,

一旦服务端返回给我json字符串后,我可以直接使用,因为jquery会自动将json字符串转换为JS对象,不需要我们手动去转换:JSON.parse()

以上就是Django中的AJax知识,笔者将在下一篇博客中为大家详细介绍Ajax与表单序列化相关的知识。

 

参考网址:http://blog.csdn.net/walkerjong/article/details/7520485

 




以上是关于Django中的Ajax详解的主要内容,如果未能解决你的问题,请参考以下文章

链接中的 URL 片段和 JSF 中的 ajax 重定向

执行AJAX返回HTML片段中的JavaScript脚本

Django 中的 Ajax 正在创建重复元素

如何将 JSON 传递给 Django 中的 Ajax 请求?

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

Django中的AJAX用户名验证