虽然 jQuery 提供了许多 Ajax 相关的便捷方法,但核心的 $.ajax() 方法是所有这些方法的基础,理解它至关重要。我们将首先回顾它,然后简要介绍便捷方法。
通常认为使用 $.ajax() 方法优于 jQuery 提供的 便捷方法 是一种好的做法。正如你将看到的,它提供了便捷方法所没有的功能,并且其语法易于阅读。
link $.ajax()jQuery 的核心 $.ajax() 方法是一种强大而直接的创建 Ajax 请求的方式。它接受一个配置对象,其中包含 jQuery 完成请求所需的所有指令。$.ajax() 方法特别有价值,因为它提供了指定成功和失败回调的能力。此外,它能够接受一个可以单独定义的配置对象,使得编写可重用代码更加容易。有关配置选项的完整文档,请访问 https://api.jqueryjs.cn/jQuery.ajax/。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Using the core $.ajax() method$.ajax({ // The URL for the request url: "post.php", // The data to send (will be converted to a query string) data: { id: 123 }, // Whether this is a POST or GET request type: "GET", // The type of data we expect back dataType : "json",}) // Code to run if the request succeeds (is done); // The response is passed to the function .done(function( json ) { $( "
注意: 关于 dataType 设置,如果服务器返回的数据格式与你指定的格式不同,你的代码可能会失败,并且原因并不总是清晰,因为 HTTP 响应代码不会显示错误。在使用 Ajax 请求时,请确保服务器返回的数据类型与你请求的数据类型一致,并验证 Content-type 标头对于该数据类型是准确的。例如,对于 JSON 数据,Content-type 标头应该是 application/json。
link $.ajax() 选项$.ajax() 方法有许多选项,这是其强大之处的一部分。有关选项的完整列表,请访问 https://api.jqueryjs.cn/jQuery.ajax/;这里列出一些你将经常使用的选项
link async如果请求应该同步发送,则设置为 false。默认为 true。请注意,如果将此选项设置为 false,你的请求将阻塞其他代码的执行,直到收到响应。
link cache是否使用缓存响应(如果可用)。除了 "script" 和 "jsonp" 之外的所有 dataType 默认为 true。当设置为 false 时,URL 会简单地附加一个缓存清除参数。
link done如果请求成功,则运行的回调函数。该函数接收响应数据(如果 dataType 是 JSON,则转换为 JavaScript 对象),以及请求的文本状态和原始请求对象。
link fail如果请求导致错误,则运行的回调函数。该函数接收原始请求对象和请求的文本状态。
link always当请求完成时运行的回调函数,无论成功还是失败。该函数接收原始请求对象和请求的文本状态。
link context回调函数运行的范围(即 this 在回调函数内部的含义)。默认情况下,回调函数内部的 this 指向最初传递给 $.ajax() 的对象。
link data发送到服务器的数据。这可以是一个对象或一个查询字符串,例如 foo=bar&baz=bim。
link dataType你期望从服务器返回的数据类型。默认情况下,如果未指定 dataType,jQuery 将查看响应的 MIME 类型。
link jsonp发出 JSONP 请求时,在查询字符串中发送的回调名称。默认为 "callback"。
link timeout在认为请求失败之前等待的毫秒数。
link traditional设置为 true 以使用 jQuery 1.4 之前使用的参数序列化样式。有关详细信息,请参阅 https://api.jqueryjs.cn/jQuery.param/。
link type请求类型,"POST" 或 "GET"。默认为 "GET"。可以使用其他请求类型,例如 "PUT" 和 "DELETE",但并非所有浏览器都支持它们。
link url请求的 URL。
url 选项是 $.ajax() 配置对象中唯一必需的属性;所有其他属性都是可选的。这也可以作为第一个参数传递给 $.ajax(),选项对象作为第二个参数。
link 便捷方法如果你不需要 $.ajax() 的广泛可配置性,并且不关心处理错误,jQuery 提供的 Ajax 便捷函数可以作为完成 Ajax 请求的有用、简洁方式。这些方法只是核心 $.ajax() 方法的“包装器”,只是预设了 $.ajax() 方法的一些选项。
jQuery 提供的便捷方法是
link $.get向提供的 URL 执行 GET 请求。
link $.post向提供的 URL 执行 POST 请求。
link $.getScript向页面添加脚本。
link $.getJSON执行 GET 请求,并期望返回 JSON。
在每种情况下,这些方法都按顺序接受以下参数
link url请求的 URL。必需。
link data发送到服务器的数据。可选。这可以是一个对象或一个查询字符串,例如 foo=bar&baz=bim。
注意: 此选项对于 $.getScript 无效。
link success callback如果请求成功,则运行的回调函数。可选。该函数接收响应数据(如果数据类型是 JSON,则转换为 JavaScript 对象),以及请求的文本状态和原始请求对象。
link data type你期望从服务器返回的数据类型。可选。
注意: 此选项仅适用于名称中未指定数据类型的方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Using jQuery's Ajax convenience methods // Get plain text or HTML$.get( "/users.php", { userId: 1234}, function( resp ) { console.log( resp ); // server response}); // Add a script to the page, then run a function defined in it$.getScript( "/static/js/myScript.js", function() { functionFromMyScript();}); // Get JSON-formatted data from the server$.getJSON( "/details.php", function( resp ) { // Log each key in the response data $.each( resp, function( key, value ) { console.log( key + " : " + value ); });});
link $.fn.load.load() 方法在 jQuery 的 Ajax 方法中是独一无二的,因为它是在选择器上调用的。.load() 方法从 URL 获取 HTML,并使用返回的 HTML 来填充选定的元素。除了向方法提供 URL 外,你还可以选择提供一个选择器;jQuery 将仅从返回的 HTML 中获取匹配的内容。
1
2
// Using .load() to populate an element$( "#newContent" ).load( "/foo.html" );
1
2
3
4
// Using .load() to populate an element based on a selector$( "#newContent" ).load( "/foo.html #myDiv h1:first", function( html ) { alert( "Content updated!" );});