一、前言
之前我们初识了ajax的知识,也进行了总结,现在我们队ajax的内容进行一个基本整理,看看还需要注意什么,再之前的内容基础上再稍微添加点东西。使得友情提示更加的友好。
二、示例改进
2.1、添加友情提示
说明:我们在view.py添加信息的时候,我们应该在后台提供一个字典,这个字典,里面包括状态、错误信息、以及数据,再通过HttpRespose返回给前端的回调函数。
def test_ajax(request):
import json
ret = {'status':True,'error':None,'data':None} #status存放状态、error存放错误信息、data存放传过去的数据
try:
h = request.POST.get("hostname")
i = request.POST.get("ip")
p = request.POST.get("port")
b = request.POST.get("business_id")
if h and len(h) > 5:
models.Host.objects.create(
hostname=h,
ip=i,
port=p,
business_id=b
)
else:
ret['status'] = False
ret["error"] = '太短了'
except Exception as e:
ret['status'] = False
ret["error"] = '请求错误'
return HttpResponse(json.dumps(ret)) #因为HttpResponse存入的字符串,所以这边要序列化成字符串
2.2、前端ajax处理
说明:前端拿到之后,进行反序列化,之后根据状态,来判断给出什么提示。
$(function(){
$("#ajax_submit").click(function(){
$.ajax({
url:"/test_ajax/",
type: "POST",
data:$('#add_form').serialize(), //把form里面的所有的值打包发到后台
success: function(data){
var obj = JSON.parse(data); //反序列化成字典类型
if(obj.status){ //获取状态
location.reload();
}else {
$("#error_msg").text(obj.error); //给出错误提示
}
}
})
})
})
如图:
三、 内容整理
3.1、ajax 的基本语法
$.ajax({
url:'url连接',
type:'POST/GET',
data:{'k1':'v1','k2':'v2'},或者 $('#id').serialize() //把form里面的所有的值打包发到后台,一般情况下用后面这种情况比较多
success: function(data){
// data是服务器端返回的字符串
var obj = JSON.parse(data);
}
})
//建议: 永远让服务器端返回一个字典
//即: return HttpResponse(json.dumps(字典))
问:那这边小伙伴就有疑问了,那我能不能:return render()或者renturn redirect()呐?
答:①其实是可以用render的,但是不可以用redirect的,因为form表单提交完毕之后肯定会刷新的,但是ajax本身就是静态的,它提交之后页面是不会动的,但是你这个时候要叫人家用redirect去刷新,人家理都不会理你的。②如果用render是可以的,我们说render是返回的一个html的一个字符串,然后把数据传进入进行渲染,你如果穿返回一个字符串给ajax,ajax接收到字符串无法进行反序列化,操作相当麻烦。所以这两个我们都不用,只用HttpResponse。传入序列化之后的对象。