在网上找到一些关于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封装了.get方法，通过该方法可以发送get文件。详细介绍见<ahref="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>
输入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()把url和数据添加到了get文件的url上，并发送出去。其中function(ret)是.get()的回调函数，它的作用会在后文介绍。
2.2 通过$.post发送HTTP POST
jquery封装了.post方法，通过该方法可以发送post文件。详细介绍见<ahref="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>
输入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就可以获取对应的值。
