首页 » JavaScript » Ajax使用方法

Ajax使用方法

原文 http://blog.csdn.net/ywq935/article/details/79203285

2018-01-31 02:00:26阅读(370)

前言
在提及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等方式,前端也不会刷新、跳转页面,若有此需求,可在前端回调函数内手动执行。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹