用JQuery实现ajax技术的常用方法

Posted 2020-10-05

       在我的前一篇用js实现ajax的三种技术中，我提到了怎么用原生的js代码去实现ajax技术，但是 可以看到，代码相对于来说还是比较多，在我们实际的开发中，我们用到的比较多的技术是用jquery来实现，因为相对于js来说， 用jquery来实现ajax技术会简单很多，因为它将一些通用的代码都封装在一些方法里面，我们可以直接调用方法即可使用， 非常方便，所有下面我就总结了关于jquery实现ajax的一些常用方法。

一、load(url, args)

---

概述：load()方法是最为简单和常用的方法，它的方法是载入远程 html 文件代码并插入至 DOM 中。
参数：url:目标URL
args:需要传给目标url的参数

举例：点击a链接，在对应位置#msg加上a链接目标页面返回来的Html代码

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        $(‘$msg‘).load(url,args);
        return false;
    });
})


    

callback:回调函数，当响应结束时，回调函数被触发，响应结果会返回给data参数，响应结果可以是xml;html;json的任意一种

二、$.get(url, args, [callback])

---

参数： url:待载入页面的URL地址
args:需要传给目标url的参数
callback:载入成功时回调函数。
举例：点击a链接，在对应位置#msg加上a链接目标页面返回来的xml代码

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        //data是返回的响应数据
        $.get(url,args,function(data){
            //获取xml文件值的方法
            var msg=$(data).find("name").text();
            $("#msg").empty.append("需要添加的html代码");
        });

        return false;
    });
})

三、$.getJSON(url, args, [callback])

---

参数： url:待载入页面的URL地址
args:需要传给目标url的参数
callback:载入成功时回调函数。
说明：与get()方法稍有不同，在获取响应结果时需要告知此返回结果是一个JSON文件

举例：点击a链接，在对应位置#msg加上a链接目标页面返回来的json文件

$(function(){
    $("a").click(function(){
        var url=this.href;
        var args={"time":new Date()};
        //data是返回的响应数据
        $.get(url,args,function(data){
            //获取json文件值的方法,因为已经告知是json文件，所以可以直接用data获取
            var msg=data.name;
            $("#msg").empty.append("需要添加的html代码");
        });

        return false;
    });
})