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

Question

我对 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() 调用都返回“未定义”。

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

Answer 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>';

Answer 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