无法访问从 ajax 调用返回的对象的属性

Posted 2023-02-25

【中文标题】无法访问从 ajax 调用返回的对象的属性

【英文标题】：Unable to access the properties of an object returned from an ajax call

【发布时间】：2011-03-29 23:28:50

【问题描述】：

我对 JS 和 jQuery 还很陌生。

我在访问从 jQuery ajax 方法返回的对象的属性时遇到问题。

正如您在下面的代码中看到的，我正在尝试使用成功回调函数中对象“数据”的属性来创建表格行，然后我尝试将其添加到表格中。

$('#add_comp').submit(function() var startDate = $('#form_startDate').val(); var initPrize = $('#form_init_prize').val(); var active = $('#form_active').val(); var dataString = 'startDate=' + startDate + '&startPrize=' + initPrize + '&active=' + active; $.ajax( 类型：'POST'， url: "/admin/competition/add-competition", 数据：数据字符串， 成功：函数（数据，文本状态，xhr） 控制台.log（数据）； 控制台.log(data.startDate); 控制台.log(数据[开始日期]); console.log(data['startDate']); var tr = '\n\ '+ 数据["开始日期"] +'\n\ '+ data.active +'\n\ '+ data.currentPrize +'\n\ '; $('#competition_table').find('tr:last').after(tr); , 错误：函数（） alert('出现错误，请咨询应用开发者。'); );

success 函数有点混乱，因为我正在尝试多种不同的方式来访问数据对象的属性。

第一行 console.log(data) 在 Firebugs 控制台中返回以下内容：

"competitionId":null,"startDate":"08\/02\/2010","endDate":null,"winner":null,"participantPool":"4c6729aa8c8fb","active":1,"startPrize" :"350","currentPrize":"350"

这确认数据对象存在并且具有正确的属性。

我假设我应该能够使用“data.propertyName”访问各个属性，但是所有后续的 console.log() 调用都返回“未定义”。

如何正确访问这些属性并使用它们来构建表格行？

【问题讨论】：

只是一个建议：你真的应该使用serialize，而不是手动构建你的传输数据。 api.jquery.com/serialize

感谢您的建议。我刚刚看了手册-你的权利这样做会容易得多！ :)

【参考方案1】：

要读取 data 对象的属性，data.startDate 和 data["startDate"] 应该都可以工作。

正如 jaywon 所指出的，问题在于您的数据对象是字符串，而不是对象。您可以通过添加另一个 console.log 行来确认这一点，如下所示：

console.log(typeof data);

这将打印出“字符串”而不是“对象”。可以正常方式打印出字符串对象的属性，例如字符数为：

console.log(data.length);

要让 jQuery 为您解析 JSON，您需要按照 jaywon 的描述设置 dataType 属性，或者在提供 json 时包含此内容类型标头：

Content-Type:text/json

如果您从服务器中包含此标头，那么您的示例代码会将正确的属性打印到控制台。

最后，要在表格中添加一行，您需要附加一个表格行而不是纯文本字符串，因此您应该将 var tr = ... 行更改为：

var tr = '<tr>' +
             '<td>' + data.startDate    +'</td>' +
             '<td>' + data.active       +'</td>' + 
             '<td>' + data.currentPrize +'</td>' +
         '</tr>';

【讨论】：

没有冒犯道格拉斯，但这怎么能得到支持，甚至不是答案？

我回答了问题的“如何正确访问这些属性”部分。我错过了从萤火虫控制台阅读他的报价，我认为萤火虫会在字符串周围加上引号，结果事实并非如此。我会更新我的答案。

【参考方案2】：

您是否尝试过设置$.ajax 呼叫的dataType 属性，以便您的呼叫知道预期的响应类型？当您将dataType 属性设置为 json 时，jQuery 知道将 JSON 响应解析为一个对象，否则它不知道您是否接收到文本字符串、html 或 JSON 等...来自服务器。

这确认数据对象存在并且具有正确的属性。 实际上，这只能确认您的 data 变量包含一个字符串，并不能确认它已被解析为具有可访问属性的对象。

试试这个：

$.ajax(
            type: 'POST',
            url: "/admin/competition/add-competition",
            data: dataString,
            dataType: "json" //add this line
            success: function(data) //only the data object passed to success handler with JSON dataType
                console.log(data);
                console.log(data.startDate);
                console.log(data[startDate]);
                console.log(data['startDate']);

                var tr = '\n\
                          '+ data["startDate"] +'\n\
                          '+ data.active +'\n\
                          '+ data.currentPrize +'\n\
                          ';
                $('#competition_table').find('tr:last').after(tr);

            ,
            error: function()
                alert('There has been an error, please consult the application developer.');
            


        );

或者，您可以使用JSON2 等外部脚本自己解析 JSON 响应。

这是一个很好的线程，还提供了服务器可能遇到的更多问题的示例，可能没有发回正确的响应标头。 jQuery won’t parse my JSON from AJAX query

【讨论】：

优秀 - 将 dataType 设置为 JSON 就可以了。感谢您花时间回答我的问题。