HOWTO · jQuery

jQuery 中的 $.Ajax 数据类型

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

本页内容

$.ajax 使用 dataType 选项,说明代码预期接收哪种响应。它会影响 jQuery 收到响应后的处理方式。这与 contentType 不同;后者描述请求正文中发送的数据格式。例如,请求可以发送 JSON,同时预期收到文本响应;应分别根据发送和接收方向设置这两个选项。

dataType 在 $.ajax 中的含义

将 dataType 设为诸如 "json" 或 "html" 的字符串。这个值表示成功处理函数准备使用的响应格式。它不是 MIME 类型:应使用 "json",而不是 "application/json"。如果省略该选项,jQuery 可能会根据响应的内容类型推断如何处理响应。如果应用依赖特定格式,明确设置预期类型可以清楚表达这一意图。

服务器仍需返回符合所选格式的内容。设置 dataType: "json" 并不会把任意响应文本变成有效 JSON。同样,contentType 也不会决定如何解析响应。

在基本的 $.ajax 请求中设置 dataType

将此选项放入传递给 $.ajax 的设置对象中。请把示例 URL 替换为应用中的端点。这个独立的 JavaScript 示例展示了设置对象,并输出预期的响应类型;它不会调用 $.ajax,也不会发送网络请求。

运行此示例:
本节中的代码以及显示的标签或输出仍为英文。

const request = {
  url: "/api/employees",
  method: "GET",
  dataType: "json"
};
console.log(`${request.method} ${request.url}: expecting ${request.dataType}`);

输出:

GET /api/employees: expecting json

在加载了 jQuery 的应用中,将这些设置传给 $.ajax,然后在 success 处理函数或 promise 回调中处理解析后的响应。对于需要发送正文的请求,应使用 contentType 描述正文的格式,并用 data 提供正文内容。对于不带请求正文的 GET 请求,除非有明确理由,否则不要添加请求正文的内容类型。

选择响应类型

根据应用需要处理的响应来选择值:

  • "xml" 用于代码需要检查或处理的 XML 文档。
  • "html" 用于代码将作为标记内容使用的 HTML 片段或文档。除非应用有安全的处理方案,否则应将返回的标记内容视为不可信数据。
  • "script" 用于预期作为 JavaScript 执行的响应。只有来源可信且确有必要执行远程脚本时才使用它。
  • "json" 用于代码要作为 JavaScript 值使用的结构化数据,例如对象或数组。
  • "jsonp" 用于返回带回调包装响应的 JSONP 端点。这是一种独立的响应机制,并不能让任意 JSON 端点都支持跨域请求。
  • "text" 用于代码将自行处理的普通字符串。

此选项应与端点实际返回的内容相符。如果响应格式或服务器行为与预期不同,应检查响应和请求,而不是随意更改选项。

各种响应类型的示例

下面每一行都是用于说明的 $.ajax 设置对象,并非已执行的请求。端点路径只是占位符;请将其替换为会返回所述格式的 URL,并按应用需要添加成功处理逻辑。

  • XML:$.ajax({ url: "/placeholder.xml", method: "GET", dataType: "xml" }) 预期返回供代码检查或处理的 XML 响应。
  • HTML:$.ajax({ url: "/placeholder.html", method: "GET", dataType: "html" }) 预期返回标记内容;请采用安全的 HTML 处理方案。
  • Script:$.ajax({ url: "/trusted-script.js", method: "GET", dataType: "script" }) 用于预期执行的 JavaScript。只有来源可信且确有必要执行远程脚本时才使用它。
  • JSON:$.ajax({ url: "/api/employees", method: "GET", dataType: "json" }) 预期返回供成功处理函数使用的结构化数据,例如对象或数组。
  • JSONP:$.ajax({ url: "/jsonp-capable-endpoint", method: "GET", dataType: "jsonp" }) 要求服务器支持 JSONP,并返回客户端所需的回调格式。
  • Text:$.ajax({ url: "/status", method: "GET", dataType: "text" }) 预期返回供代码处理或显示的普通字符串。

这些示例展示了每个选项如何与合适的端点占位符配对。它们不表示这些端点真实存在,也不表示已经发送了请求。

解析、缓存与跨域行为

响应解析、缓存行为和跨域处理可能取决于 jQuery 版本及请求上下文。这里的示例不保证对格式错误或空 JSON、脚本缓存,或 JSON 与 JSONP 之间的转换会有某种特定结果。请查阅应用所用版本的文档,并确认端点支持所选响应类型。

JSONP 不能与普通 JSON 互换:它要求端点专门返回带回调包装的响应。跨源请求也取决于浏览器和服务器的行为;仅选择 "json" 并不会授予跨域访问权限。如果请求失败,请检查响应正文、响应头、浏览器控制台和服务器配置,再将这些信息与代码预期的类型进行对照。