HOWTO · jQuery

jQuery 中的 $.Ajax 数据类型

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

本页内容

jQuery ajax 请求中的数据类型是我们期望从服务器获得的数据类型。本教程描述了 jQuery ajax 中数据类型的使用。

jQuery 中的 Ajax 数据类型

ajax 请求中的数据类型是指我们期望从服务器获得的数据类型。如果没有指定数据,jQuery 将根据响应的 MIME 类型进行设置。

通常,数据是纯文本、HTML 或 JSON。下面给出了一个带有数据类型的简单 ajax 请求。

$.ajax({
    type : "POST",
    url : user,
    datatype : "application/json",
    contentType: "text/plain",
    success : function(employee_data) {
      //some code here
    },
    error : function(error) {
   //some error error here
},

在上述请求中,我们期望服务器提供的数据类型是 JSON。数据类型的类型始终是字符串。

ajax 请求的可用数据类型有:

  • XML 将返回一个可由 jQuery 处理的文档的 XML 文件。

  • HTML 将返回 HTML 作为纯文本,其中脚本标签在插入 DOM 时被评估。

  • script 会将响应评估为 JavaScript 并将其作为纯文本返回。我们需要使用带有 URL 的查询字符串参数 =[TIMESTAMP] 禁用缓存,直到缓存选项为真,并且此方法会将 POST 请求转换为远程域请求的 GET。

  • JSON 会将响应评估为 JSON 并返回一个 JavaScript 对象。跨域 JSON 请求将被转换为 jsonp,除非它在请求选项中包含 jsonp : false

    JSON 数据将被严格解析;任何有故障的 JSON 都将被拒绝,并抛出错误。在较新版本的 jQuery 中,空响应也会被拒绝。

  • jsonp 将使用 JSONP 加载到 JSON 块中。我们可以在 URL 的末尾添加一个额外的 callback 来指定它。

    我们还可以通过将 _=[TIMESTAMP] 附加到 URL 来禁用缓存,直到缓存选项为 true

  • text 将返回纯文本字符串。

以下示例是使用上述数据类型的一些 ajax 请求。

将 XML 用于 Ajax 请求

用于在自定义 XML 模式中传输数据的 ajax 请求。

$.ajax({
  url: 'http://demoxmlurl',
  type: 'GET',
  dataType: 'xml',
  success: parseXml
});
});

将 HTML 用于 Ajax 请求

将 HTML 块传输到页面某处的 ajax 请求。

$.ajax({
  type: 'POST',
  url: 'post.php',
  dataType: 'json',
  data: {id: $('#id').val()},
});

为 Ajax 请求使用脚本

向页面添加新脚本的 ajax 请求。

$.ajax({url: 'http://unknown.jquery.com/foo', dataType: 'script', cache: true})
    .then(
        function() {
          console.log('Success');
        },
        function() {
          console.log('Failed');
        });

将 JSON 用于 Ajax 请求

用于传输 JSON 数据的 ajax 请求将包括任何类型的数据。

$.ajax({
  url: 'delftstack.php',
  type: 'POST',
  data: {ID: ID, First_Name: First_Name, Last_Name: Last_Name, Salary: Salary},
  dataType: 'JSON',
  success: function(employee_data) {
    console.log('Success');
    $('#result').text(employee_data);
  }
});

使用 JSONP 处理 Ajax 请求

从另一个域传输 JSON 数据的 ajax 请求。

$.ajax({
  type: 'GET',
  url: url,
  async: false,
  jsonpCallback: 'jsonCallback',
  contentType: 'application/json',
  dataType: 'jsonp',
  success: function(json) {
    console.dir(json.sites);
  },
  error: function(er) {
    console.log(er.message);
  }
});

将文本用于 Ajax 请求

传输纯文本字符串的 ajax 请求。

$.ajax({
  type: 'POST',
  url: 'delftstack.php',
  data: '{}',
  async: true,
  dataType: 'text',
  success: function(data) {
    console.log(data);
  }
});