day19-初识Ajax

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_33998125

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量102

点赞数

文章标签： javascript python json ViewUI

原文链接：http://www.cnblogs.com/zhangqigao/articles/8610226.html

版权

一、前言

　　之前我们提交页面的时候，页面会刷新，那当然我们输入正确的信息的情况下，这个没有问题，但是有一点的是，我们就不好去验证了，我们想的是，我们数据提交到后台，然后页面不刷新，然后通过一个回调函数来控制，所以我们今天就学习一下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("长小了")

提交不成功如图：