$.get、$.post、$getJSON、$ajax的用法跟区别

最新推荐文章于 2024-09-11 02:20:32 发布

元仙僧

最新推荐文章于 2024-09-11 02:20:32 发布

阅读量6.5k

点赞数 13

分类专栏： javascript 文章标签： $.get $.post $.getJSON $.ajax js

本文链接：https://blog.csdn.net/weixin_42567389/article/details/86569569

版权

javascript 专栏收录该内容

28 篇文章 4 订阅

订阅专栏

$.get

$.get()方法使用GET方式来进行异步请求，它的语法结构为：

$.get( url [, data] [, callback] )

解释一下这个函数的各个参数：

url：string类型，ajax请求的地址。

data：可选参数，object类型，发送至服务器的key/value数据会作为QueryString附加到请求URL中。

callback：可选参数，function类型，当ajax返回成功时自动调用该函数。
最后写一个$.get()的实例供大家参考：


$.get("submit.php",{id:'123',name:'小王',},function(data,state){              
        //这里显示从服务器返回的数据            
            alert(data);          
        //这里显示返回的状态                
        if(state == 'ok'){      
            alert("返回数据成功");      
        }else{      
            alert("返回数据失败");      
        }      
});

$.post()

$.post()方法使用POST方式来进行异步请求，它的语法结构为：

$.post(url,[data],[callback],[type])

这个方法和 $. g e t () 用法差不多，唯独多了一个 t y p e 参数，那么这里就只介绍 t y p e 参数吧，其他的参考上面$ .get()的。

type：type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的。

最后写一个$.post()的实例供大家参考：


$.post("submit.php",{id:'123',name:'小明',},      

        function(data,state){              

        //这里显示从服务器返回的数据             

        alert(data);        
        //这里显示返回的状态            
        if(state == 'ok'){      

            alert("返回数据成功");      
        }else{      
            alert("返回数据失败");      

        },"json");

$.getJSON()

$.getJSON()是专门为ajax获取json数据而设置的，并且支持"跨域"调用，其语法的格式为：

getJSON(url,[data],[callback])

url：string类型，发送请求地址

data ：可选参数，待发送 Key/value 参数，同get，post类型的data

callback ：可选参数，载入成功时回调函数，同get，post类型的callback

JSON是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写成"myurl?callback=X"这种格式，让程序执行回调函数X。

提示：数据最终还是通过url后面通过get方式发送数据出去的，这就决定了，发送的data数据量不能太多，否则造成url太长接收失败（getJSON方式是不可能有post方式递交的）。

$.ajax()

$.ajax()是jquery中通用的一个ajax封装，其语法的格式为：

$.ajax(options)

其中options是一个object类型，它指明了本次ajax调用的具体参数，这里我把最常用的几个参数附上


$.ajax({      

        url: 'submit.aspx',      

        datatype: "json",      

        type: 'post',      

        success: function (e) {      

        //成功后回调      

            alert("回调函数成功了");      

         },      

        error: function(e){      

        //失败后回调      

            alert("服务器请求失败");      

        },      

        beforeSend: function(){      

        //发送请求前调用，可以放一些"正在加载"之类额话      

            alert("正在加载");           

}})

jQuery.getJSON() 函数详解

jQuery.getJSON()函数用于通过HTTP
GET形式的AJAX请求获取远程JSON编码的数据。

JSON是一种数据格式，JS原生支持JSON格式，通过jQuery.getJSON()从服务器获得的JSON数据，jQuery会先尝试将其转为对应的JS对象。

如果请求的URL中包括"callback=?"等类似的部分，jQuery会自动将其视作JSONP，并执行对应的回调函数来获取JSON数据。

重要注意：服务器返回的JSON数据必须符合严格的JSON语法，例如：所有属性名称必须加双引号，所有字符串值也必须加双引号(而不是单引号)。

请注意，该函数是通过异步方式加载数据的。

该函数属于全局jQuery对象。

语法

jQuery 1.0 新增该静态函数。


jQuery.getJSON( url [, data ] [, success ] )

参数

参数	描述
url	String类型指定请求的目标URL。
data	可选/String/Object类型发送请求传递的数据。
success	可选/Function类型请求成功时执行的回调函数。它有3个参数：其一是请求返回的数据，其二是请求状态文本(例如"success"、 “notmodified”)，其三是当前jqXHR对象(jQuery 1.4及之前版本，该参数为原生的XMLHttpRequest对象)。

参数success指定的回调函数只有在请求成功时才会执行，如果请求失败(例如找不到页面、服务器错误等)则不作任何处理。

返回值

jQuery.getJSON()函数的返回值为jqXHR类型，返回发送该请求的jqXHR对象(jQuery 1.4及以前版本返回的是原生的XMLHttpRequest对象)。

示例&说明

jQuery.getJSON()是jQuery.ajax()函数的如下简写形式：



jQuery.getJSON(url, data, success);

// 等价于

$.ajax({

 url: url,

 type: "GET",

 data: data,

 success: success,

 dataType: "json"

});

请参考以下这段HTML示例代码：



<div id="content1">CodePlayer</div>

<div id="content2">专注于编程开发技术分享</div>

<div id="content3">http://www.365mini.com</div>

以下是与jQuery.getJSON()函数相关的jQuery示例代码，以演示jQuery.getJSON()函数的具体用法：



//获取index.php?type=json的JSON数据，但不作任何处理

$.getJSON( "index.php?type=json" );



// 等价于 index.php?id=5&orderId=5&money=100

$.getJSON( "index.php?id=5", "orderId=5&money=100" );



// 等价于 http://localhost/index.php?id=5&orderId=5&money=100

$.getJSON( "http://localhost/index.php?id=5", {orderId: 5, money: 100} );





/* ***** 一般不会使用上述不对获取的JSON数据作任何处理的用法***** */





// 获取index.php?type=json的JSON数据，获取成功时弹出对话框

$.getJSON( "index.php?type=json", function(data, textStatus, jqXHR){

    // data 是该请求返回的数据(可能经过处理)

    // textStatus 可能是"success"、 "notmodified"等

    // jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)





    // 如果服务器返回的JSON格式的数据是 {"id": 5, "name": "CodePlayer"}

    // JSON格式的数据的属性名称必须加双引号，字符串值必须加双引号。

    // jQuery已经将其转换成对应的JS对象

    alert( data.id ); // 5

    alert( data.name ); // CodePlayer



} );





// 获取"/action.php?m=list&page=2&size=10"的JSON数据，获取成功时弹出对话框

$.getJSON( "/action.php?m=list", { page: 2, size: 10  }, function(data, textStatus, jqXHR){



    // 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]

    // jQuery将获取的JSON格式数据转换为JS数组

    for(var i in data){

        var obj = data[i];

        alert( obj.title );

    }



} );