python django ajax 逻辑推理_python(Django之Ajax)

基本操作：

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

参考地址：http://www.w3school.com.cn/ajax/index.asp

简单示例：如果用户输入的服务器名称长度大于5就返回OK，否则提示长度不够。

defassets(request):

now= time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time()))if request.method == "GET":#QuerySet(查到的是QuerySet对象)

v1 =models.Business.objects.all()#gt表示大于，lt表示小于。大于等于gte,小于等于lte，写法跟下面相同

v2 = models.Assets.objects.filter(nid__gt=0)return render(request,'assets.html',{'nowdate':now,"v1":v1,'v2':v2})elif request.method == "POST":

n= request.POST.get('h')

i= request.POST.get('ip')

po= request.POST.get('port')

bid= request.POST.get('b_id')print(n,i,po,bid,sep='\t')if n and len(n) > 5:#这里可以写入数据库操作

return HttpResponse("OK")else:return HttpResponse("太短了")

基本写法：

$('#submit').click(function(){

$.ajax({

url:"/cmdb/assets/",#解释提交的位置

type:'POST',　　　　 #提交方式

data:{'h':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#b_id').val()},#h、ip、port、b_id是后台views里面request.POST.get的数据名字。对应的$('#ip').val()是拿到这个id名称的标签的数据。

success:function(data){

alert(data) #data就是后台Httpresponse返回给ajax的数据

}

})

})

})

二：ajax加上判断：

$('#submit').click(function(){

$.ajax({

url:"/cmdb/assets/",

type:'POST',

data:{'h':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#b_id').val()},

success:function(data){if (data=="OK"){ #如果后台Httpresponse返回的是OK，就刷新页面

location.reload()

}else{　　　　　　#否则aler出Httpresponse返回的信息

alert(data) } } }) }) })

升级版：

views：

defassets(request):

now= time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time()))if request.method == "GET":#QuerySet(查到的是QuerySet对象)

v1 =models.Business.objects.all()#gt表示大于，lt表示小于。大于等于gte,小于等于lte，写法跟下面相同

v2 = models.Assets.objects.filter(nid__gt=0)return render(request,'assets.html',{'nowdate':now,"v1":v1,'v2':v2})elif request.method == "POST":#引用json模块

importjson#首先定义好状态，错误信息，数据。

ret = {'status':True,'error':None,'data':True}try:

n= request.POST.get('h')

i= request.POST.get('ip')

po= request.POST.get('port')

bid= request.POST.get('b_id')print(n,i,po,bid,sep='\t')#如果hostname这个名字长度大于5就执行数据库操作

if n and len(n) > 5:#数据库具体操作

pass

#否则数据库操作失败，状态就是False。提示用户用户名太短。

else:

ret['status'] =False

ret['error'] = "用户名太短"

exceptException as e:

ret['status'] =False

ret['error'] = "用户名太短"

#牢记ajax只能用HttpResponse返回，但是上面我们定义好的是ret是一个字典。

#所以我们json.dumps序列化ret给ajax传过去(HttpResponse把ret当做一个字符串发给了ajax)

return HttpResponse(json.dumps(ret))

html：

报错信息span标签：

jquery：

首先定义一个全局变量obj，先用JSON.parse(data),把python返回的data字典反序列化。然后if判断如果obj.status是True的话就重新加载页面，否则else，把id是error这个标签的text变成obj.error信息(也就是上面python写的用户名太短)

*注意：我们可以不用下面这么写data:{'h':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#b_id').val()},这样写既麻烦有在每个form表单上都定义了id。

*看这里：

用ajax的serialize()方法。他会打包你的所有form表单的数据到后台。

*写法(把下面的data写成如下，就OK了，注意前面是在form表单的定义action的同等位置定义一个id即可)：

提醒：后台get数据的时候get的名字还是form表单里面的name值。

data: $('#for').serialize(),

$('#submit').click(function(){

$.ajax({

url:"/cmdb/assets/",

type:'POST',

data:{'h':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#b_id').val()},

success:function(data){

var obj=JSON.parse(data);if(obj.status){

location.reload();

}else{

$('#error').text(obj.error);

}

}

})

})

})