jQuery-http方法详解

from:jQuery中$.get、$.post、$.getJSON、$.ajax 方法详解

一、函数解释

jQuery.get() :使用 HTTP GET 请求从服务器加载数据

jQuery.post():使用 HTTP POST 请求从服务器加载数据

jQuery.getJSON():使用 HTTP GET 请求从服务器加载 JSON 编码数据

jQuery.ajax():执行异步 HTTP (Ajax) 请求

 

二、解析

1.jQuery.get()

$(selector).get(url,data,success(response,status,xhr),dataType)

url必需。规定将请求发送的哪个 URL。
data可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)

可选。规定当请求成功时运行的函数。

额外的参数:

  • response – 包含来自请求的结果数据
  • status – 包含请求的状态
  • xhr – 包含 XMLHttpRequest 对象
dataType

可选。规定预计的服务器响应的数据类型。

默认地,jQuery 将智能判断。

可能的类型:

  • “xml”
  • “html”
  • “text”
  • “script”
  • “json”
  • “jsonp”

 

简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

例子:

  1. $.get(
  2.   “product?type=111”,{
  3.   id:  ‘123’,
  4.   name:  ‘青藤园’,
  5.   },function(data,state){
  6.   //这里显示从服务器返回的数据
  7.   alert(data);
  8.   //这里显示返回的状态
  9.   alert(state);
  10.   }
  11. )

该函数是简写的 Ajax 函数,等价于:

 

  1. $.ajax({
  2.   url: url,
  3.   data: data,
  4.   success: success,
  5.   dataType: dataType
  6. });

 

2.jQuery.post()

post() 方法通过 HTTP POST 请求从服务器载入数据

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

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

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

url必需。规定把请求发送到哪个 URL。
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数。
dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

该函数是简写的 Ajax 函数,等价于:

  1. $.ajax({
  2.   type: ‘POST’,
  3.   url: url,
  4.   data: data,
  5.   success: success,
  6.   dataType: dataType
  7. });
  1. $.post(
  2.   “product?type=111”,{
  3.   id:  ‘123’,
  4.   name:  ‘青藤园’,
  5.   },function(data,state){
  6.   //这里显示从服务器返回的数据
  7.   alert(data);
  8.   //这里显示返回的状态
  9.   alert(state);
  10.   },
  11.   “json”
  12. )

3.jQuery.getJSON()
使用 AJAX 请求来获得 JSON 数据,并输出结果

函数没有type参数,返回的是json类型的,不需要转换。

jQuery.getJSON(url,data,success(data,status,xhr))

url必需。规定将请求发送的哪个 URL。
data可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)

可选。规定当请求成功时运行的函数。

额外的参数:

  • response – 包含来自请求的结果数据
  • status – 包含请求的状态
  • xhr – 包含 XMLHttpRequest 对象

该函数是简写的 Ajax 函数,等价于:

  1. $.ajax({
  2.   url: url,
  3.   data: data,
  4.   success: callback,
  5.   dataType: json
  6. });

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象(映射),那么在附加到 URL 之前将转换为字符串,并进行 URL 编码。

传递给 callback 的返回数据,可以是 JavaScript 对象,或以 JSON 结构定义的数组,并使用 $.parseJSON() 方法进行解析。

从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据:

$.getJSON(“test.js”function(json){

  1.   alert(“JSON Data: “ + json.users[3].name);
  2. });

4.jQuery.ajax()
执行异步 HTTP (Ajax) 请求

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

jQuery.ajax([settings])

settings

可选。用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

通过 AJAX 加载一段文本:

  1. //jQuery 代码:
  2. $(document).ready(function(){
  3.   $(“#b01”).click(function(){
  4.   htmlobj=$.ajax({url:“/jquery/test1.txt”,async:false});
  5.   $(“#myDiv”).html(htmlobj.responseText);
  6.   });
  7. });
  1. //HTML 代码:
  2. <div id=“myDiv”><h2>Let AJAX change this text</h2></div>
  3. <button id=“b01” type=“button”>Change Content</button>

 

三、区别

 

    • GET – 从指定的资源请求数据,发送至服务器的key/value数据会作为QueryString附加到请求URL中,服务器返回数据的格式其实是字符串形式,并不是我们想要的json数据格式
    • POST – 向指定的资源提交要处理的数据,这个函数跟$.get()参数差不多,多了一个type参数,type为返回的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就
      和$.get()返回的格式一样,都是字符串的
    • getJSON-使用 AJAX 请求来获得 JSON 数据,使用JSON相比传统的通过 GET、POST直接发送“裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的
      ajax()函数的一个简化版本。这个函数也是可以跨域使用的,相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式,让程序执行回调函数X。
    • ajax()-$.ajax()
      返回其创建的 XMLHttpRequest 对象
此条目发表在jquery分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注