jQuery AJAX 无法使用JSON响应

Question

jQuery AJAX 无法使用JSON响应

4

我有一个来自PHP文件的JSON响应，例如：

[
  {"id":"1"},
  {"archiveitem":"<small>26.06.2015 12:25<\/small><br \/><span class=\"label label-default\">Bug<\/span> has been submitted by Admin"}
]

当我点击按钮后，尝试将此响应提取到一个div中，但是Firebug告诉我错误处理程序的消息。我无法弄清楚问题所在？

$('#loadarchive').click(function(){
    $.ajax({
        type: 'post',
        url: '/src/php/LoadAdminDashboardArchive.php',
        dataType: 'json',
        data: {
            action : 'getArchive'
        },
        success: function(results) {
            var archiveelements = JSON.parse(results);
            console.log(results);
            $.each(archiveelements, function(){
                $('#archivecontent').html('<div class="mark-read-container"><span class="btn-mark-unread" id="' + this.id + '">Unarchive</span></div><div class="bs-callout bs-callout-default">' + this.archiveitem + '</div>');
            });
        },
        error: function(){
            console.log('Cannot retrieve data.');
        }
    });
});

- Quhalix89

如果错误处理程序被触发，这意味着服务器的响应不是“200 OK”。这意味着您的responseURL位置存在错误。实际上，如果responseURL是一个变量，您应该删除它周围的引号。 - Rory McCrossan

这个响应的HTTP状态码是什么？ - kamituel

哇，速度真快 :-) 我不太熟悉firebug，但它似乎没有给出任何响应... responseURL不是一个变量，它只是/src/php/LoadAdminDashboardArchive.php。 - Quhalix89

1

抱歉，上面的代码已经被更改了。 - Quhalix89

5个回答

1

如果您深入探索一下控制台，您可以获取更多信息。或者通过记录这两个参数：

error: function(xhr, mssg) {
    console.log(xhr, mssg);
}

- jazZRo

哦，我不知道那个...它给了我：Object { readyState=0, status=0, statusText="error", mehr...} error - Quhalix89

1

首先，你的回答是不正确的。正确的回答应该像这样。

[{
  "id":"1",
  "archiveitem":"<small>26.06.2015 12:25<\/small>
<br \/><span class=\"labellabel-default\">Bug<\/span> has been submitted by Admin"
},
{
  ...
}]

第二步：您不需要解析结果，即JSON.parse不是必需的，因为dataType:'json'可能会处理JSON。

最后，您的成功方法应该像这样：

 success: function(results) {
            $.each(results, function(ind,el){
                $('#archivecontent').html('<div class="mark-read-container"><span class="btn-mark-unread" id="' + el.id + '">Unarchive</span></div><div class="bs-callout bs-callout-default">' + el.archiveitem + '</div>');
            });
        },

- Sumeet

好的，我同意JSON响应格式不正确，我已经更改了它，现在它是这样的： [{"id":"1","archiveitem":"26.06.2015 12:25 Bug has been submitted by Admin"}]我也更改了jQuery部分，但错误仍然相同... - Quhalix89

@Quhalix89 使用开发者工具中的网络选项卡，检查请求是否返回正确的响应。 - Sumeet

在使用Firefox开发者工具的网络选项卡时，似乎点击按钮只会向当前页面发送请求，而不是我的php-json响应文件。 - Quhalix89

1

你说的错误处理程序显示了消息。

这意味着由于URL不正确或其他原因，AJAX从未发送到服务器。

在Firefox中使用Firebug并查看控制台选项卡中的错误。

同时我看到了你的代码。

dataType: 'json',
data: { action : 'getArchive' },
success: function(results) {
    var archiveelements = JSON.parse(results);
}

不要使用JSON.parse(results)，因为你已经编写了dataType: 'json'，任何类型的响应都会自动解析。

- Umair Ayub

0

我能够让它工作了，问题相当简单...

我忘记粘贴“按钮”-触发Ajax请求的源代码。它是一个类型为“提交”的输入，因此在成功检索响应后默认重新加载页面...所以e.preventDefault（）;是正确的方法。

谢谢你们所有人。

- Quhalix89

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sergej · Accepted Answer

我尝试运行你的代码，但是出现了以下错误：

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

通过定义 dataType: 'json'，您的结果已经被解析为数组。因此，您可以执行以下操作：

success: function (results) {
    if (results["head"]["foo"] != 0) {
        // do something
    } else if (results["head"]["bar"] == 1) {
        // do something
    }
}

这在我的电脑上可以运行：

$.ajax({
    type: 'post',
    url: '/src/php/LoadAdminDashboardArchive.php',
    dataType: 'json',
    data: { action : 'getArchive' },
    success: function(results) {
        console.log(results);
        $.each(results, function(){
            $('#archivecontent').html('<div class="mark-read-container"><span class="btn-mark-unread" id="' + this.id + '">Unarchive</span></div><div class="bs-callout bs-callout-default">' + this.archiveitem + '</div>');
        });
    },
    error: function(){
        console.log('Cannot retrieve data.');
    }
});