Chen Jian

导航

 

在网上找到一些关于ajax的实现

在web上通常通过http协议中的get/post文件发送数据或者请求。在浏览器中输入url后,浏览器就帮助我们完成get请求的发送与返回文件的解析,并刷新更新界面。但是如果我们不想更新界面,只想发送一个get或者post文件把数据(请求)传给服务器端,然后获取服务器返回的response文件。这个时候就可以利用ajax技术实现。

实现ajax有两种方法,一种是用原生的JavaScript发送,这种方法比较麻烦,可以参考《其他相关文章[1]》。另一种使用jQuery封装好了ajax的一些方法,使用起来更简单,本文主要介绍如何用jquery的ajax方法与django后台通讯。

1. 需求描述

将如下的表单数据a和b发送给服务器,服务器端的django接收数据并计算a+b的结果,并以json格式附在response文件上返回回来。前端接收到返回的结果后,在不刷新页面的情况下,将结果显示出来。

<form>
a: <input type="text" id="a" name="a"> <br>
b: <input type="text" id="b" name="b"> <br>
<p>result: <span id='result'></span></p>
<button type="button" id='sum'>ajax提交</button>
</form>

这一个过程分为3个阶段:前端发送HTTP文件、django接收HTTP文件并返回HTTP RESPONSE文件、前端接收RESPONSE并显示结果;

2. 前端发送数据

发送数据有两种方法,分别是get和post,其对应的两种jquery方法就是.get().post(),只要选其中一种就好。另外,还有一种方法$.ajax(),该方法更为灵活,post和get都能发,body的文件形式也可以自定义。

2.1 通过$.get发送HTTP GET

jquery封装了.getget<ahref="http://www.ziqiangxuetang.com/jquery/jqueryajaxgetpost.html">.get说明》

为#sum添加click事件

<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.get("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });
</script>

输入a=5,b=6,点击ajax提交后即会发出如下HTTP GET文件:

GET /ajax/add/?a=5&b=6 HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Accept: */*
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36
Referer: http://127.0.0.1:8000/ajax/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: csrftoken=OTKs7zAcHysRAV8S35mZRkKQ8FW7rhTN

可以看出.get()urlgeturlfunction(ret).get()的回调函数,它的作用会在后文介绍。

2.2 通过$.post发送HTTP POST

jquery封装了.postpost<ahref="http://www.ziqiangxuetang.com/jquery/jqueryajaxgetpost.html">.post说明》

为#sum添加click事件

<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.post("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });
</script>

输入a=5,b=6,点击ajax提交后即会发出如下HTTP POST文件:

POST /ajax/add/ HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Content-Length: 7
Accept: */*
Origin: http://127.0.0.1:8000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8000/ajax/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: csrftoken=OTKs7zAcHysRAV8S35mZRkKQ8FW7rhTN

a=5&b=6

可以看出$.post()帮助我们向指定的url发送了一个HTTP POST, 数据放在post文件的body中。

2.3 通过$.ajax()发送GET/POST

$.ajax()详细说明见http://www.ziqiangxuetang.com/jquery/ajax-ajax.html“>《jQuery ajax() 方法》,本例中代码如下:

    <script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.ajax({
            type:"GET",
            url:"/ajax/add/",
            data:{"a":a, "b":b},
            data-type:"json",
            success: function(ret){
                    $('#result').html(ret.result)
                     }
        })
      });
    });
    </script>

3. django接收并返回RESPONSE

首先在url配置里添加响应请求的url,以便指定对应的视图函数。

urlpatterns = [
     ..
     url(r'^ajax/add/', views.ajax_test_add, name = 'ajax_test_add'),
]

3.1 对于get请求

在views.py下定义相应的响应函数:

def ajax_test_add(request):
    a = int(request.GET.get('a'))
    b = int(request.GET.get('b'))
    return_json = {'result':a+b}
    return HttpResponse(json.dumps(return_json), content_type='application/json')

这样django在接到2.1中的HTTP GET就会返回如下RESPONSE:

HTTP/1.0 200 OK
Date: Tue, 11 Aug 2015 13:55:00 GMT
Server: WSGIServer/0.1 Python/2.7.6
X-Frame-Options: SAMEORIGIN
Content-Type: application/json

{"result": 11}

3.2 对于post请求

由于django中对post增加了csrf的保护,所以其views.py的响应函数需要加上@csrf_exempt装饰器,具体如下:

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def ajax_test_add(request):
    a = int(request.POST.get('a'))
    b = int(request.POST.get('b'))
    return_json = {'result':a+b}
    return HttpResponse(json.dumps(return_json), content_type='application/json')

这样这样django在接到2.2中的HTTP POST就会返回3.1中一样的RESPONSE。

4. 回调函数显示结果

.get().post()和.ajax()function(ret).get()为例:

<script>
    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.get("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });
</script>

function(ret)是.get()response.get()会很智能地根据response文件headers里的Content-Type所指示的body格式,将body封装相应对象传给回调函数。例如Content-Type:application/json,ret就会是一个json对象;Content-Type:text,ret就会是一个字符串。

在该例子中,回调函数内将结果显示在#result元素内,因为ret是一个javascript json对象,所以用ret.result就可以获取对应的值。

posted on 2017-08-03 14:59  Chen Jian  阅读(244)  评论(0编辑  收藏  举报