Django中使用Ajax
Ajax 全称是Asynchronous JavaScript and XML，即异步JavaScript和XML，是指创建一种交互式网页应用的网页开发技术。
一般的网页（即不使用ajax技术的网页），如果需要更新某些内容，需要重新加载整个页面。而应用了ajax技术之后，可以在不重新加载整个整个页面的情况下，通过后台加载数据，并在页面上显示。
jquery的存在，使得实现ajax技术变得很容易，基本用法： $.ajax(url,setting) 该方法会返回一个XMLHttpRequest对象。
URL：必选的，是希望请求数据的URL。
setting是可选的，里面有很多的选项，用于配置 Ajax 请求的键值对集合。
列出几个重要的参数：
1、async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
2、data
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
3、dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
4、success
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。
5、xhr
类型：Function
需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。
data 选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。
上面是最基本的加载数据方法，但可以使用更简单的方法，如$.get,$.post,$.getJSON等等。
$.getJSON用于通过HTTP GET请求获得JSON数据，并输出结果。 用法：jQuery.getJSON(url,data,func)，当数据返回之后，就会调用给定的func。 等同于：
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
在Django项目中，我就用该方法请求json数据。
实际例子：
在JS脚本中定义：
<script type="text/javascript">
$(function() {
function submit_form(e) {
$.getJSON('/dashboard/testajax/',
function(result) {
$('#linecontainer').highcharts({
title: {
text: '文章统计',
x: -20 //center
},
subtitle: {
text: '统计月发表文章数',
x: -20
},
xAxis: {
categories: result.months
},
yAxis: {
title: {
text: '篇'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '篇'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '文章数',
data: result.count
}
]
});
});
}
submit_form();
});
$.getJSON首先请求我的应用URL，http://hbnnlove.sinaapp.com/api/testajax. 当成功返回json数据后，就会调用函数：
$('#linecontainer').highcharts({}）在id=linecontainer处会highchart图形。
视图函数：
def uidarticles(request):
uid = request.user.id
article_list = Article.objects.filter(author=uid,status=0).order_by('pub_time')
xAxis = ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05',
'2016-06','2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12']
months = list(set(map(lambda x:x.pub_time.strftime('%Y-%m'),article_list)))
count =[]
for month in xAxis:
if month not in months:
count.append(0)
continue
single_month_data = filter(lambda x:x.pub_time.strftime('%Y-%m')==month,article_list)
sum = len(single_month_data)
count.append(sum)
current_month = datetime.date.today().strftime('%Y-%m')
return JsonResponse({'months':xAxis,'count':count})
效果图：
微信分享/微信扫码阅读
