Ajax
jQuery Ajax
作用：前端页面验证
jQuery.get(...) # 参数非字典
所有参数：
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
dataType: 返回内容格式，xml, json, script, text, html
jQuery.post(...)
所有参数：
url: 待载入页面的URL地址
data: 待发送 Key/value 参数
success: 载入成功时回调函数
dataType: 返回内容格式，xml, json, script, text, html
jQuery.getJSON(...)
所有参数：
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
jQuery.getScript(...)
所有参数：
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
jQuery.ajax(...) # 参数是字典
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式
使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string
converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
$.ajax({
accepts: {
mycustomtype: 'application/x-some-custom-type'
},
// Expect a `mycustomtype` back from server
dataType: 'mycustomtype'
// Instructions for how to deserialize a `mycustomtype`
converters: {
'text mycustomtype': function(result) {
// Do Stuff
return newresult;
}
},
});
demo1
$('#ajax_submit').click(function(){
$.ajax({
url: '/test_ajax/',
type: "POST",
#data: $('#add_form').serialize() # form表单中的所有可以提交的值打包发送到后台
data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
success: function(data){
// data是服务器端返回的字符串
var obj = JSON.parse(data)
if(obj.status){
location.reload();
}else{
$('#error_msg').text(obj.error);
}
}
})
});
def test_ajax(request):
ret = {"status": True, "error": None, "data": None}
try:
print(request.method, request.POST, sep="\t")
h = request.POST.get('hostname')
i = request.POST.get('ip')
p = request.POST.get('port')
b = request.POST.get('b_id')
if h and len(h) > 5:
models.Host.objects.create(hostname=h,
ip=i,
port=p,
b_id=b)
else:
ret['status'] = False
ret['error'] = '太短了'
except Exception as e:
ret['status'] = False
ret['error'] = '请求错误'
return HttpResponse(json.dumps(ret))# HttpResponse的参数是字符串，ret是一个字典，所以需要通过json将字典转换成字符串
demo2
$('#add_submit_ajax').click(function(){
$.ajax({
url: '/ajax_add_app/',
//data: {"user": 123, 'host_list': [1,2,3,4]},
data: $('#add_form').serialize(),
type: "POST",
traditional: true, # 需要这个属性，才可以将前端的列表、字典发送到后端
dataType: "JSON", # 帮我们处理了转换的过程，直接返回给我们对象的格式
success: function(obj){
},
error: function(){
}
});
});
def ajax_add_app(request):
ret = {"status": True, "error": None, 'data': None}
print(request.POST.get('app_name'))
print(request.POST.getlist('host_list'))
app_name = request.POST.get('app_name')
host_list = request.POST.getlist('host_list')
obj = models.Application.objects.create(name=app_name)
obj.r.add(*host_list)
return HttpResponse(json.dumps(ret))
补充：
前端对象转换成字符串
li = [1,2,3,4]
json.stringify(li)