Ajax使用方法

亦凉 2022-06-01 12:52 206阅读 0赞

**前言**  
在提及ajax之前，得先提及js以及jquery，关于jquery API调用方式，参考此站，收录齐全，查起来很方便：[jQuery API 速查表][jQuery API]

Form提交：  
传统的form提交，在用户点击form内的submit按钮后，将整个form表单内的内容全部提交至后台，获取响应并刷新页面。

Ajax提交 （Asynchronous Javascript And XML）（异步 JavaScript 和 XML）  
1.Ajax 是一种用于创建快速动态网页的技术。  
2.Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。  
3.通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

**Ajax使用方式**  
**1.ajax原生用法**

$('#send').click(function(){ 
        //请求的5个阶段，对应readyState的5种值
            //0: 未初始化，send方法未调用；
            //1: 正在发送请求，send方法已调用；
            //2: 请求发送完毕，send方法执行完毕；
            //3: 正在解析响应内容；
            //4: 响应内容解析完毕；
    
        var data = 'name=yang';
        var xhr = new XMLHttpRequest();        //创建一个ajax对象
        xhr.onreadystatechange = function(event){     //对ajax对象进行监听
            if(xhr.readyState == 4){    //4表示解析完毕
                if(xhr.status == 200){    //200为正常返回
                    console.log(xhr)
                }
            }
        };
        xhr.open('POST','url',true);    //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');    //可有可无
        xhr.send(data);        //发送
    });

原生方式使用起来事实上并不是很便利，jquery也封装了ajax方法，推荐使用jquery ajax

**2.JQuery ajax用法**  
前端jquery ajax：

$('button[id="AsInfo_sub"]').click(function(){ 
                        $.ajax({
                            url:"/cmdb_modify",
                            data:$('#AssetInfo').serialize(), //传输给后台的源数据,以dict{k:v}的格式传输
                            type:'POST',
                            dataType:'JSON', //将接收到的数据进行json Parse处理，等同于JSON.parse(rdata)
                            traditional: true, //传输给后台的数据可以包含集合list类型，例如复选框传入的多个数据，为[]类型
                            beforeSend:function(){ 
                                $("#AsInfo_sub").attr({
       "disabled":"disabled"})
                            },  //数据向后台提交成功前执行的回调函数
                            success: function(rdata){ 
                                alert("提交成功");
                                location.reload()
                                },  //成功接收到后台返回数据后执行的回调函数，形参rdata用来接收后台传回的数据
                            error: function () { 
                                $('#AssetInfo .error_info').text(rdata['error'])
                                }  //未能成功接收到后台返回数据后执行的回调函数
                        })
                    });

Django后端处理请求函数：

def modify(request):
        res={
       "status":True,"error":False,"data":None}
        if request.method=='POST':
            try:
                obj_info={
                    'hostname' : request.POST.get("hostname"),
                    'host_ip' : request.POST.get("host_ip"),
                    'owner_name' : request.POST.get("owner_name"),
                    'owner_id' : request.POST.get("owner_id"),
                    'asset_tag' : request.POST.get("asset_tag"),
                    'online_time' : request.POST.get("online_time"),
                    'OS' : request.POST.get("OS"),
                    'OS_type' : request.POST.get("OS_type"),
                    'off_time' : request.POST.get("off_time"),
                    'SN' : request.POST.get("SN"),
                    'Brand' : request.POST.get("Brand"),
                    'memory' : int(request.POST.get("memory")),
                    'CPU_num' : int(request.POST.get("CPU_num")),
                }
                nid=request.POST.get('Asset_ID')
                models.Host.objects.filter(id=int(nid)).update(**obj_info)
    
            except Exception as e:
                res['error']=e
                res['status']=False
    
            return HttpResponse(json.dumps(res))

因ajax不刷新页面的特性，因此返回http请求时，推荐使用Httpresponse(str)的方式,若返回的数据为dict格式，可使用json处理后返回给前端，前端再反处理为JSON格式使用。

**注意**：针对ajax请求，后端即使使用render、redirect等方式，前端也不会刷新、跳转页面，若有此需求，可在前端回调函数内手动执行。

[jQuery API]: http://jquery.cuishifeng.cn/