Question

我是JS和jQuery的新手。

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

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

$('#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({
            type: 'POST',
            url: "/admin/competition/add-competition",
            data: dataString,
            success: function(data, textStatus, xhr){
                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.');
            }

        });

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

第一个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（）调用都会返回'undefined'。

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

Answer 1

要阅读data对象的属性，data.startDate和data["startDate"]都应该有效。

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

console.log(typeof data);

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

console.log(data.length);

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

Content-Type:text/json

如果您从服务器包含此标头，那么您的示例代码将向控制台输出正确的属性。

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

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

Answer 2

您是否尝试过设置dataType来电的$.ajax属性，以便您的来电知道会有什么样的回应？当您将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

JS / jQuery：无法访问从ajax调用返回的对象的属性

2 个答案: