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

最新推荐文章于 2024-02-17 13:45:00 发布

Baple

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量1.1k

点赞数

分类专栏： JavaScript相关 WEB前端文章标签： jquery ajax

WEB前端同时被 2 个专栏收录

79 篇文章 0 订阅

订阅专栏

JavaScript相关

18 篇文章 0 订阅

订阅专栏

http://www.it165.net/pro/html/201309/7322.html

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 http://www.jb51.net/article/43194.htm

一、函数解释

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。

例子：

 
   01. 
   $.get( 
  
   02. 
   "product?type=111",{ 
  
   03. 
   id:  '123', 
  
   04. 
   name:  '青藤园', 
  
   05. 
   },function(data,state){ 
  
   06. 
   //这里显示从服务器返回的数据 
  
   07. 
   alert(data); 
  
   08. 
   //这里显示返回的状态 
  
   09. 
   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. 
   });

 
   01. 
   $.post( 
  
   02. 
   "product?type=111",{ 
  
   03. 
   id:  '123', 
  
   04. 
   name:  '青藤园', 
  
   05. 
   },function(data,state){ 
  
   06. 
   //这里显示从服务器返回的数据 
  
   07. 
   alert(data); 
  
   08. 
   //这里显示返回的状态 
  
   09. 
   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 字段数据：

 
   1. 
   $.getJSON("test.js", function(json){ 
  
   2. 
   alert("JSON Data: " + json.users[3].name); 
  
   3. 
   });

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

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

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

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

jQuery.ajax([settings])

settings	可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

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 对象