jQuery中$.get、$.post、$.getJSON、$.ajax 步骤详解

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。

例子：

$.get(
  "product?type=111",{
  id:  '123',
  name:  '青藤园',
  },function(data,state){
  //这里显示从服务器返回的数据
  alert(data);
  //这里显示返回的状态
  alert(state);
  }
)

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

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 函数，等价于：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.post(
  "product?type=111",{
  id:  '123',
  name:  '青藤园',
  },function(data,state){
  //这里显示从服务器返回的数据
  alert(data);
  //这里显示返回的状态
  alert(state);
  },
  "json"
)

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 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

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

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

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

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

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

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

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

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

jQuery.ajax([settings])

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

settings

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

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

通过 AJAX 加载一段文本：

//jQuery 代码：
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

//HTML 代码：
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<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中$.get、$.post、$.getJSON、$.ajax 步骤详解

相关推荐