进阶Django（一）：Django与Ajax

Ajax

JQuery

Ajax前端实现：JQuery向后端发送ajax请求

JQuery的ajax函数

$.ajax({settings})

Ajax后端实现：Django读取并相应ajax请求

实例：ajax实现异步更新html

其实我倒是认为这教程不该放在django进阶里，毕竟这是一个比较独立的内容，包括cookie不该放在JSP教程里一样。但是这个教程的例子用的是django，所以暂时就先这样吧。

Ajax

Ajax即“Asynchronous Javascript And XML And HTML”，异步的Javascript与XML。Ajax可以在不重新加载整个网页的情况下，通过js与网页后端的交互，达成更新部分网页的技术。Ajax是异步的。Ajax是一种技术，而不是编程语言。

Ajax的优点：相对快速而且省资源。Ajax的缺点：对爬虫不友好。

Ajax的实现：js向页面后端发送ajax请求，后端返回组织过的数据，js根据数据更新部分网页。

在本文中，我们使用django和jQuery实现Ajax。

JQuery

JQuery是一个Javascript库，它“极大地简化了Javascript编程”（这句话我照抄的菜鸟教程，不过我对JS没有很深刻的了解，那就当是真的吧）。

本文中需要使用的JQuery十分简单，而笔者的JS确实不行。所以建议读者先自学一会，请把JQuery的部分语法与CSS联系在一起。

注：JQuery毕竟是个库，使用之前需要导入。一些网站会提供JQuery文件的公共引用地址，比如百度的http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js。

Ajax前端实现：JQuery向后端发送ajax请求

JQuery的ajax函数

实现Ajax请求的函数有很多，举例如下：

-$.ajax({settings})：应该是最原始的ajax函数了，参数最多

-$.get(url,data,func,dataType)：用get方式执行ajax请求

-$.post(url,data,func,datatype)：用post方式执行ajax请求

-$.getJSON(url,data,func)：可以看做dataType设置为JSON的$.get()

-$.getScript(url,func)：用get发送ajax请求，并直接执行返回的js

-$.load(url,data,func)：将返回的数据直接写入DOM，其HTTP方式由data存在与否决定，存在则是get，反之post

可以看出除了第一个函数，后面的这些其实都属于对第一个函数的简化版本，所以我们直接讲$.ajax()。

$.ajax({settings})

对于$.ajax()而言，其所有参数都是可选的。你可以通过$.ajaxSetup()设置这些可选参数的默认值，这里我们就先跳过，直接对$.ajax()函数设置参数。主要的参数如下：

-url：默认为本页面，设置为接收ajax请求的url

-type：默认为get，本次ajax请求采用的传递方式

-data：要传递给后端的参数，可以为Object也可以为String

-dataType：这个参数设定为JQuery希望后端返回的数据类型，如果不指定，JQuery会根据服务器返回的mime信息作为responseXML或者responseText传递

-beforeSend：这是一个函数，在发送请求前调用，其接收的参数为XMLHttpRequest，也就是本次请求的XML序列。在此函数中如果返回false，将会终止本次ajax请求

-complete/success/error：这是一个回调函数，在完成/发送成功/发送失败时被调用

-dataFilter：这是一个函数，对后端返回的数据进行预处理

由于ajax前端请求本质上还是个http请求，所以没什么好讲的，我就不举例了。本教程关于ajax的使用我会举一个完整的例子放在最后。

Ajax后端实现：Django读取并相应ajax请求

之前我提过，ajax请求本质上还是http请求，所以view对ajax的接收也没有什么不同。但是我们要返回一个能被Jquery以期望方式读取的数据格式。可以返回JsonResponse，也可以通过HttpResponse（Json.dumps(data)）返回有结构的数据（当然你也可以直接返回一个文本）。

注1：如果你的django项目启用了csrf验证，你接受ajax请求的视图函数前需要加上一个装饰器“@csrf_exempt”（引入：from django.views.decorators.csrf import csrf_exempt）。

注2：如果你想直接把model对象集合传输给前端，使用JsonResponse(List(此集合.values()),safe=false)

实例：ajax实现异步更新html

都看到这里了，我默认你已经学会了django的基本操作，所以我只放出html编写和接受ajax的视图函数部分。

Html：

<!doctype html><html><head><script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" ></script></head><body><p id="p1">点击以发送ajax</p><script>$("p").click(function(){$.ajax({url:"/ajax",type:"post",success:function(response){var root=document.getElementById("p1");//获取p root.innerHTML=root.innerHTML+response;}})})</script></body></html>

View：

from django.views.decorators.csrf import csrf_exempt@csrf_exemptdef ajax(request):if(request.method=="POST"):return HttpResponse("一个ajax的回复")