Ajax使用方法

前言
在提及ajax之前，得先提及js以及jquery，关于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等方式，前端也不会刷新、跳转页面，若有此需求，可在前端回调函数内手动执行。