HOME> 帮派风云> jQuery 的 Ajax 相关方法

jQuery 的 Ajax 相关方法

2026-03-01 15:27:22

虽然 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 ) { $( "

" ).text( json.title ).appendTo( "body" ); $( "
").html( json.html ).appendTo( "body" ); }) // Code to run if the request fails; the raw request and // status codes are passed to the function .fail(function( xhr, status, errorThrown ) { alert( "Sorry, there was a problem!" ); console.log( "Error: " + errorThrown ); console.log( "Status: " + status ); console.dir( xhr ); }) // Code to run regardless of success or failure; .always(function( xhr, status ) { alert( "The request is complete!" ); });

注意: 关于 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!" );});

最新发表 newmodule
友情链接 newmodule