day19-初识Ajax
一、前言
之前我们提交页面的时候,页面会刷新,那当然我们输入正确的信息的情况下,这个没有问题,但是有一点的是,我们就不好去验证了,我们想的是,我们数据提交到后台,然后页面不刷新,然后通过一个回调函数来控制,所以我们今天就学习一下ajax,它是jquery里面封装的,用它必须先导入jquery的类库。它就是悄悄的提交到后台,但是页面不刷新。
二、ajax的语法
$.ajax({ url:"url连接", type: "POST/GET", data:$('#id').serialize(),//把form表单里面的数据直接打包给后台,当然你用{'k1':'v1','k2':'v2'}也行 success: function(data){ #返回的数据在data中 回调函数... } })
这个success后面的function函数:请求发送过去,success后面的函数是不会执行的,它会等到服务端给我返回一点数据的时候,这个时候函数就会被自动触发,这个就是回调函数,返回的数据放在data中。
$.ajax({ url:'URL', data:$("#id").serialize(), #或者是字典{"k1":'v1','k2':[1,2,3],'k3':JSON.stringify({'k1':'v1','k2':'v2'})},如果是value是字典的话,需要序列化成字符串发送给后台,后台反序列化一下 type:"POST", dataType:"JSON",//在jquery内部帮你做序列化的处理,代替了success里面的JSON.parse(data)这一步 traditional: true, //{'host_list':[1,2,3,4]},jquery内部帮你做处理,可是它处理不了,发到后台是none,所以这边要告诉jquery需要处理 success: function(obj){ //这样的话,这边就不是data了,而是obj对象 location.reload() #刷新 location.href="" #跳转 }, error: function(){ //发送一个请求,后台没有捕捉到的,发生了一个未知的问题 } })
三、具体示例
3.1、添加urls.py
from django.urls import path,re_path from app01 import views urlpatterns = [ re_path('^test_ajax/$',views.test_ajax) ]
3.2、templates模板里面的host.html如下改动:
<a id="ajax_submit" style="display: inline-block;padding: 5px;background: blue;color: white;">悄悄提交</a> <script> $(function(){ $("#ajax_submit").click(function(){ $.ajax({ url:"/test_ajax/", type: "POST", data:{"hostname":$("#host").val(),"ip":$("#ip").val(),"port":$("#port").val(),"business_id":$("#sel").val()}, success: function(data){ if(data == "ok"){ //接收到后台数据之后,做一个验证 location.reload(); //刷新当前页面 }else { alert(data); } } }) }) }) </script>
如图:
3.3、view.py中的代码
def test_ajax(request): # print(request.method,request.GET.get("user"),request.GET.get("pwd"),sep="\t") 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("business_id") if h and len(h) > 5: models.Host.objects.create( hostname=h, ip=i, port=p, business_id=b ) return HttpResponse("ok") #给前端的sucess的回调函数传入字符串 ok ,传给data else: return HttpResponse("长小了")
提交不成功如图:
四、总结
- ajax是悄悄的提交给后台,但是页面不需要刷新,是为了给前端验证的时候用的。
- ajax是封装在jquery里面的,后台验证后通过HttpResponse("str"),返回给回调函数,回调函数通过data接收str字符串
- data接收到str需要进行验证,验证完毕成功重新刷新该页面location.reload(),验证失败,则给出相应的提示。