jQuery 的 Ajax 相关方法

虽然 jQuery 提供了许多 Ajax 相关便利方法，但核心 $.ajax() 方法是所有这些方法的核心，理解它至关重要。我们先回顾一下，然后简要介绍一下便利方法。

通常认为使用 $.ajax() 方法优于 jQuery 提供的便利方法。正如你所看到的，它提供了便利方法所没有的功能，并且它的语法易于阅读。

链接 $.ajax()

jQuery 的核心 $.ajax() 方法是一种创建 Ajax 请求的强大而直接的方法。它采用一个配置对象，其中包含 jQuery 完成请求所需的所有指令。$.ajax() 方法特别有价值，因为它提供了指定成功和失败回调的能力。此外，它能够采用可以单独定义的配置对象，使得编写可重用代码变得更加容易。有关配置选项的完整文档，请访问 https://api.jqueryjs.cn/jQuery.ajax/。

// 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 ) {
     $( "<h1>" ).text( json.title ).appendTo( "body" );
     $( "<div class=\"content\">").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。

链接 $.ajax() 选项

$.ajax() 方法有很多选项，这也是它的强大之处。要查看完整选项列表，请访问 https://api.jqueryjs.cn/jQuery.ajax/；以下列出了几个你经常会用到的选项

链接 async

如果请求应同步发送，则设置为 false。默认为 true。请注意，如果你将此选项设置为 false，则你的请求将阻止其他代码执行，直到收到响应。

链接 cache

是否使用可用的缓存响应。对于除“脚本”和“jsonp”之外的所有 dataType，默认为 true。当设置为 false 时，URL 只会附加一个防缓存参数。

链接 done

如果请求成功，则运行回调函数。该函数接收响应数据（如果 dataType 为 JSON，则转换为 JavaScript 对象），以及请求的文本状态和原始请求对象。

链接 fail

如果请求导致错误，则运行回调函数。该函数接收原始请求对象和请求的文本状态。

链接 always

无论成功与否，当请求完成时运行回调函数。该函数接收原始请求对象和请求的文本状态。

链接 context

回调函数应运行的范围（即回调函数内 this 的含义）。默认情况下，回调函数内的 this 指的是最初传递给 $.ajax() 的对象。

链接 data

要发送到服务器的数据。这可以是对象或查询字符串，例如 foo=bar&baz=bim。

链接 dataType

你期望从服务器返回的数据类型。默认情况下，如果未指定 dataType，jQuery 将查看响应的 MIME 类型。

链接 jsonp

在执行 JSONP 请求时，在查询字符串中发送回调名称。默认为“回调”。

链接 超时

在将请求视为失败之前等待的时间（以毫秒为单位）。

链接 传统

设置为 true 以使用 jQuery 1.4 之前使用的参数序列化样式。有关详细信息，请参阅 https://api.jqueryjs.cn/jQuery.param/。

链接 类型

请求的类型，“POST”或“GET”。默认为“GET”。可以使用其他请求类型，例如“PUT”和“DELETE”，但并非所有浏览器都支持这些类型。

链接 URL

请求的 URL。

url 选项是 $.ajax() 配置对象的唯一必需属性；所有其他属性都是可选的。这也可以作为 $.ajax() 的第一个参数传递，而选项对象作为第二个参数传递。

链接 便捷方法

如果您不需要 $.ajax() 的广泛可配置性，并且不关心处理错误，那么 jQuery 提供的 Ajax 便捷函数可以成为完成 Ajax 请求的有用且简洁的方法。这些方法只是核心 $.ajax() 方法的“包装器”，并且只是预先设置了 $.ajax() 方法的一些选项。

jQuery 提供的便捷方法是

链接 $.get

对提供的 URL 执行 GET 请求。

链接 $.post

对提供的 URL 执行 POST 请求。

链接 $.getScript

向页面添加脚本。

链接 $.getJSON

执行 GET 请求，并期望返回 JSON。

在每种情况下，这些方法按顺序采用以下参数

链接 URL

请求的 URL。必需。

链接 data

要发送到服务器的数据。可选。这可以是对象或查询字符串，例如 foo=bar&baz=bim。

注意：此选项对 $.getScript 无效。

链接 成功回调

如果请求成功，则运行回调函数。可选。该函数接收响应数据（如果数据类型为 JSON，则转换为 JavaScript 对象），以及请求的文本状态和原始请求对象。

链接 数据类型

您期望从服务器返回的数据类型。可选。

注意：此选项仅适用于名称中未指定数据类型的函数。

// 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 );
    });
});

链接 $.fn.load

.load() 函数在 jQuery 的 Ajax 函数中独一无二，因为它在选择中被调用。.load() 函数从 URL 中获取 HTML，并使用返回的 HTML 来填充选定的元素。除了向函数提供一个 URL，您还可以选择提供一个选择器；jQuery 将仅从返回的 HTML 中获取匹配的内容。

// Using .load() to populate an element
$( "#newContent" ).load( "/foo.html" );

// Using .load() to populate an element based on a selector
$( "#newContent" ).load( "/foo.html #myDiv h1:first", function( html ) {
    alert( "Content updated!" );
});