前言
在提及ajax之前，得先提及js以及jquery，关于jquery API调用方式，参考此站，收录齐全，查起来很方便：jQuery API 速查表
Form提交：
传统的form提交，在用户点击form内的submit按钮后，将整个form表单内的内容全部提交至后台，获取响应并刷新页面。
Ajax提交 （Asynchronous Javascript And XML）（异步 JavaScript 和 XML）
1.Ajax 是一种用于创建快速动态网页的技术。
2.Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
3.通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax使用方式
1.ajax原生用法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21$('#send').click(function(){
//请求的5个阶段，对应readyState的5种值
//0: 未初始化，send方法未调用；
//1: 正在发送请求，send方法已调用；
//2: 请求发送完毕，send方法执行完毕；
//3: 正在解析响应内容；
//4: 响应内容解析完毕；
var data = 'name=yang';
var xhr = new XMLHttpRequest(); //创建一个ajax对象
xhr.onreadystatechange = function(event){ //对ajax对象进行监听
if(xhr.readyState == 4){ //4表示解析完毕
if(xhr.status == 200){ //200为正常返回
console.log(xhr)
}
}
};
xhr.open('POST','url',true); //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //可有可无
xhr.send(data); //发送
});
原生方式使用起来事实上并不是很便利，jquery也封装了ajax方法，推荐使用jquery ajax
2.JQuery ajax用法
前端jquery ajax：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19$('button[id="AsInfo_sub"]').click(function(){
$.ajax({
url:"/cmdb_modify",
data:$('#AssetInfo').serialize(), //传输给后台的源数据,以dict{k:v}的格式传输
type:'POST',
dataType:'JSON', //将接收到的数据进行json Parse处理，等同于JSON.parse(rdata)
traditional: true, //传输给后台的数据可以包含集合list类型，例如复选框传入的多个数据，为[]类型
beforeSend:function(){
$("#AsInfo_sub").attr({"disabled":"disabled"})
}, //数据向后台提交成功前执行的回调函数
success: function(rdata){
alert("提交成功");
location.reload()
}, //成功接收到后台返回数据后执行的回调函数，形参rdata用来接收后台传回的数据
error: function () {
$('#AssetInfo .error_info').text(rdata['error'])
} //未能成功接收到后台返回数据后执行的回调函数
})
});
Django后端处理请求函数：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27def modify(request):
res={"status":True,"error":False,"data":None}
if request.method=='POST':
try:
obj_info={
'hostname' : request.POST.get("hostname"),
'host_ip' : request.POST.get("host_ip"),
'owner_name' : request.POST.get("owner_name"),
'owner_id' : request.POST.get("owner_id"),
'asset_tag' : request.POST.get("asset_tag"),
'online_time' : request.POST.get("online_time"),
'OS' : request.POST.get("OS"),
'OS_type' : request.POST.get("OS_type"),
'off_time' : request.POST.get("off_time"),
'SN' : request.POST.get("SN"),
'Brand' : request.POST.get("Brand"),
'memory' : int(request.POST.get("memory")),
'CPU_num' : int(request.POST.get("CPU_num")),
}
nid=request.POST.get('Asset_ID')
models.Host.objects.filter(id=int(nid)).update(**obj_info)
except Exception as e:
res['error']=e
res['status']=False
return HttpResponse(json.dumps(res))
因ajax不刷新页面的特性，因此返回http请求时，推荐使用Httpresponse(str)的方式,若返回的数据为dict格式，可使用json处理后返回给前端，前端再反处理为JSON格式使用。
注意：针对ajax请求，后端即使使用render、redirect等方式，前端也不会刷新、跳转页面，若有此需求，可在前端回调函数内手动执行。
