从 JQuery.ajax 成功数据中解析 JSON

Posted 2023-05-08

【中文标题】从 JQuery.ajax 成功数据中解析 JSON

【英文标题】：Parse JSON from JQuery.ajax success data

【发布时间】：2011-07-14 10:18:26

【问题描述】：

我无法从 JQery.ajax 调用中获取 JSON 对象的内容。我的电话：

$('#Search').click(function () 
    var query = $('#query').valueOf();
    $.ajax(
        url: '/Products/Search',
        type: "POST",
        data: query,
        dataType: 'application/json; charset=utf-8',
        success: function (data) 
            alert(data);
            for (var x = 0; x < data.length; x++) 
                content = data[x].Id;
                content += "<br>";
                content += data[x].Name;
                content += "<br>";
                $(content).appendTo("#ProductList");
               // updateListing(data[x]);
            
        
    );
);

似乎正确返回了 JSON 对象，因为“alert(data)”显示以下内容

["Id": "1", "Name": "Shirt", "Id": "2", "Name":"Pants"]

但是当我尝试使用以下方式向页面显示 ID 或名称时：

content = data[x].Id;
content += "<br>";
content += data[x].Name;
content += "<br>";

它向页面返回“未定义”。我做错了什么？

感谢您的帮助。

【问题讨论】：

文档有帮助。 api.jquery.com/jQuery.ajax 表明 'application/json; charset=utf-8' 不是 dataType 的有效值。

通过JSON.parse()转成json

【参考方案1】：

数据以 JSON 的字符串表示形式返回，您没有将其转换回 javascript 对象。将 dataType 设置为 'json' 以使其自动转换。

【讨论】：

@DipakYadav：getJSON 不会发布。

@MarceloCantos（关于您的回答）：这是真的。然而，根据jQuery Manual，“任何格式错误的 JSON 都会被拒绝并引发解析错误。从 jQuery 1.9 开始，空响应也会被拒绝”。因此，您只能使用dataType: 'json'，如果您确定，该服务器将返回格式正确的 JSON。如果它只返回“a string, that looks like JSON”，你应该使用dataType: "text json"来强制jQuery转换。

header('Content-Type: application/json');如果您使用的是 php

【参考方案2】：

我建议你使用：

var returnedData = JSON.parse(response);

将 JSON 字符串（如果只是文本）转换为 JavaScript 对象。

【讨论】：

@RyanGates 我相信，如果我没记错的话，abobreshov 说的是简单的success: function (data) data = JSON.parse(data);。

【参考方案3】：

效果很好， 例如：

$.ajax(
    url: "http://localhost:11141/Search/BasicSearchContent?ContentTitle=" + "تهران",
    type: 'GET',
    cache: false,
    success: function(result) 
        //  alert(jQuery.dataType);
        if (result) 
            //  var dd = JSON.parse(result);
            alert(result[0].Id)
        

    ,
    error: function() 
        alert("No");
    
);

最后，你需要使用这个语句...

result[0].Whatever

【参考方案4】：

确保不会发生此类错误（使用字符串而不是 json）的方法之一是查看alert 中打印的内容。当你这样做时

alert(data)

如果 data 是一个字符串，它将打印包含的所有内容。但是，如果您打印的是 json 对象。您将在警报中收到以下响应

[object Object]

如果这是响应，那么您可以确定您可以将其用作对象（在本例中为 json）。

因此，在使用它之前，您需要先将字符串转换为 json：

JSON.parse(data)

【参考方案5】：

嗯...您大约是那里的 3/4...您已经将 JSON 作为文本。

问题是您似乎在处理这个字符串，就好像它已经是一个 JavaScript 对象，其属性与传输的字段相关。

它不是……它只是一个字符串。

像“content = data[x].Id;”这样的查询肯定会失败，因为 JavaScript 没有找到附加到它正在查看的字符串的这些属性......再次，它只是一个字符串。

您应该能够通过...是的... JSON 对象的 parse 方法简单地将数据解析为 JSON。

myResult = JSON.parse(request.responseText);

现在 myResult 是一个 javascript 对象，其中包含通过 AJAX 传输的属性。

这应该可以让你按照你想要的方式处理它。

看起来 JSON.parse 是在添加 ECMA5 时添加的，所以任何相当现代的东西都应该能够本地处理这个......如果你必须处理化石，你也可以尝试外部库来处理这个，例如 @987654321 @ 或JSON2。

郑重声明，Andy E 已经为其他人 HERE 回答了这个问题。

edit - 看到“官方或可信来源”的请求，我认为最可信的编码人员之一可能是 John Resig ~ ECMA5 JSON ~ 我会链接到关于原生 JSON 支持的实际 ECMA5 规范，但我宁愿将某人推荐给像 Resig 这样的大师，而不是枯燥的规范。

【讨论】：

我认为真正的问题是：为什么$.ajax() 不转换它？

【参考方案6】：

尝试使用 jquery each 函数来遍历您的 json 对象：

$.each(data,function(i,j)
    content ='<span>'+j[i].Id+'<br />'+j[i].Name+'<br /></span>';
    $('#ProductList').append(content);
);

【参考方案7】：

你可以使用 jQuery parseJSON 方法：

var Data = $.parseJSON(response);

【参考方案8】：

输入类型按钮

<input type="button" Id="update" value="Update">

我已经成功地在 perl 中发布了一个带有 AJAX 的表单。发布表单后，控制器返回如下 JSON 响应

$(function() 

    $('#Search').click(function() 
        var query = $('#query').val();
        var update = $('#update').val();

        $.ajax(
            type: 'POST',
            url: '/Products/Search/',
            data: 
                'insert': update,
                'query': address,
            ,
            success: function(res) 
                $('#ProductList').empty('');
                console.log(res);
                json = JSON.parse(res);
                for (var i in json) 
                    var row = $('<tr>');
                    row.append($('<td id=' + json[i].Id + '>').html(json[i].Id));
                    row.append($('<td id=' + json[i].Name + '>').html(json[i].Name));
                    $('</tr>');
                    $('#ProductList').append(row);
                
            ,
            error: function() 
                alert("did not work");
                location.reload(true);
            
        );
    );
);

【参考方案9】：

来自 jQuery API：使用dataType 的设置，如果没有指定，jQuery 将尝试根据 MIME 类型使用$.parseJSON() 推断它（JSON 文本的 MIME 类型为“application/json”）响应（在 1.4 JSON 将产生一个 JavaScript 对象）。 或者您可以将dataType 设置为json 以自动转换。

【参考方案10】：

我不确定您的设置出了什么问题。也许服务器没有正确设置标题。不确定。作为一个长镜头，你可以试试这个

$.ajax(
    url : url,
    dataType : 'json'
)
.done(function(data, statusText, resObject) 
   var jsonData = resObject.responseJSON
)

【参考方案11】：

解析并转换成js对象就可以了。

success: function(response) 
    var content = "";
    var jsondata = JSON.parse(response);
    for (var x = 0; x < jsonData.length; x++) 
        content += jsondata[x].Id;
        content += "<br>";
        content += jsondata[x].Name;
        content += "<br>";
    
    $("#ProductList").append(content);