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

版权声明:转载请注明元仙僧 https://blog.csdn.net/weixin_42567389/article/details/86569569

$.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参数吧,其他的参考上面 .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 );

    }



} );

猜你喜欢

转载自blog.csdn.net/weixin_42567389/article/details/86569569