Question

我无法从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>";

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

感谢您的帮助。

Answer 1

数据将作为JSON的字符串表示形式返回，并且您不会将其转换回JavaScript对象。将dataType设置为仅'json'以自动转换。

Answer 2

我建议您使用：

var returnedData = JSON.parse(response);

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

Answer 3

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

alert(data)

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

[object Object]

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

因此，您需要先将字符串转换为json，然后才能使用它：

JSON.parse(data)

Answer 4

嗯......你大约3/4的路程......你已经将JSON作为文本了。

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

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

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

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

myResult = JSON.parse(request.responseText);

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

这应该允许你按照你想要的方式处理它。

看起来在添加ECMA5时添加了JSON.parse，所以任何相当现代的东西都应该能够原生地处理它...如果你必须处理化石，你也可以尝试使用外部库来处理这个问题，例如{{ 3}}或jQuery。

为了记录，Andy E已经为其他人JSON2回答了这个问题。

编辑 - 看到“官方或可靠来源”的请求，可能我认为最可靠的编码器之一是John Resig〜HERE〜我会链接关于本机JSON支持的实际ECMA5规范，但我宁愿将某人推荐给像Resig这样的大师而不是干燥的规范。

Answer 5

工作正常，例如： .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

Answer 6

你可以使用jQuery parseJSON方法：

var Data = $.parseJSON(response);

Answer 7

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

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

Answer 8

解析并将其转换为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);  
    }

Answer 9

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

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

Answer 10

输入类型按钮

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

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

10 个答案: