javascript - 无法访问从 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({
            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.');
            }

        });

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() 调用都返回“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 时包含此内容类型 header :

Content-Type:text/json

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

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

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