jquery与django实现ajax通信_jquery ajax django

写在前面：

在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>
1
2
3
4
5
6

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

2. 前端发送数据

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

2.1 通过$.get发送HTTP GET

jquery封装了$.get方法，通过该方法可以发送get文件。详细介绍见<a href = "http://www.ziqiangxuetang.com/jquery/jquery-ajax-get-post.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>
1
2
3
4
5
6
7
8
9
10
11

输入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
1
2
3
4
5
6
7
8
9
10

可以看出$.get()把url和数据添加到了get文件的url上，并发送出去。其中function(ret)是$.get()的回调函数，它的作用会在后文介绍。

2.2 通过$.post发送HTTP POST

jquery封装了$.post方法，通过该方法可以发送post文件。详细介绍见<a href = "http://www.ziqiangxuetang.com/jquery/jquery-ajax-get-post.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>
1
2
3
4
5
6
7
8
9
10
11

输入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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可以看出$.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(){
      $(" rel="nofollow"#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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. django接收并返回RESPONSE

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

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

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')
1
2
3
4
5

这样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}
1
2
3
4
5
6
7

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')
1
2
3
4
5
6
7
8

这样这样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>
1
2
3
4
5
6
7
8
9
10
11

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就可以获取对应的值。

参考文章

• [1]《django ajax》：http://www.ziqiangxuetang.com/django/django-ajax.html
• [2]《jquery ajax》：http://www.ziqiangxuetang.com/jquery/jquery-ajax-intro.html

其他相关文章

• [1]用原生javascript实现ajax通信：http://www.ziqiangxuetang.com/ajax/ajax-tutorial.html
• [2]javascript json文本解析：http://www.ziqiangxuetang.com/json/json-tutorial.html
• [3]javascript xml文本解析：http://www.ziqiangxuetang.com/ajax/ajax-xmlfile.html

思维导图