迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

jQuery 中的 $.Ajax 数据类型

作者:迹忆客 最近更新:2024/03/24 浏览次数:

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 触发点击

发布时间:2024/03/24 浏览次数:186 分类:JavaScript

在今天的文章中,我们将学习 jQuery 中的触发点击事件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便