一、函数解释
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) | 可选。规定当请求成功时运行的函数。 额外的参数:
|
dataType | 可选。规定预计的服务器响应的数据类型。 默认地,jQuery 将智能判断。 可能的类型:
|
简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
例子:
$.get( "product?type=111",{ id: '123', name: '青藤园', },function(data,state){ //这里显示从服务器返回的数据 alert(data); //这里显示返回的状态 alert(state); } )
$.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({ 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" )
函数没有type参数,返回的是json类型的,不需要转换。
jQuery.getJSON(url,data,success(data,status,xhr))
url | 必需。规定将请求发送的哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
success(data,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数:
|
$.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); });
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
jQuery.ajax([settings])
settings | 可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。 |
//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>