jQuery 中的 $.Ajax 数据类型

Sheeraz Gul 2022年6月7日
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);
    }
});
Author: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook