jQuery AJAX 不能与 JSON 响应一起使用答案

【问题标题】：jQuery AJAX can't work with JSON responsejQuery AJAX 不能与 JSON 响应一起使用
【发布时间】：2015-10-01 09:59:50
【问题描述】：

我的 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.');
        }
    });
});

【问题讨论】：

如果错误处理程序被命中意味着来自服务器的响应不是200 OK。这意味着您的responseURL 位置存在错误。事实上，如果responseURL 是一个变量，你应该去掉它周围的引号。
这个响应的 HTTP 状态码是什么？
哇，真快 :-) 我对 firebug 不是很熟悉，但似乎它没有给出任何响应... responseURL 不是变量，它只是 /src/php/ LoadAdminDashboardArchive.php
很抱歉，上面的代码已更改。

标签： php jquery ajax json

【解决方案1】：

我尝试运行你的代码，我得到了

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.');
    }
});

【讨论】：

什么工具给你那个“语法错误”？我在萤火虫中看不到这一点。即使使用您的代码，我也得到： readyState 0 ResponseJSON undefined status 0 statusText "error"
我使用 Firebug 2.0.11 进行调试并在 Firebug 控制台上收到此消息
您的/src/php/LoadAdminDashboardArchive.php-文件中可能有错误，当您直接调用该 URL 时会得到什么响应？
当删除 php 文件中的“isset”处理程序并打开 url 时，我会得到上面提到的 json 格式...
你有什么“isset”？

【解决方案2】：

如果您深入了解控制台，您可以从控制台获得更多信息。或者通过记录这两个参数：

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

【讨论】：

哦，我不知道...它给了我：Object { readyState=0, status=0, statusText="error", mehr...} 错误

【解决方案3】：

第一你的回复不正确，正确的回复应该是这样的

[{
  "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>');
            });
        },

【讨论】：

好的，我同意 json 响应的格式不正确，我更改了它，现在是：[{"id":"1","archiveitem":"26.06.2015 12: 25
Bug已被管理员提交"}] 我也改了jquery部分，但是错误依旧一样的……
@Quhalix89 在开发者工具中使用网络选项卡并检查请求是否返回正确的响应
在 Firefox 开发人员工具中使用网络选项卡时，似乎单击按钮只是向当前页面发送请求，而不是向我的 php-json-response-file 发送请求

【解决方案4】：

正如你所说，来自错误处理程序的消息正在显示。

这意味着由于 URL 不正确或任何其他原因，AJAX 永远不会发送到服务器。

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

我也看到了你的代码

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

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

【讨论】：

【解决方案5】：

我能够让它工作，问题很简单......

我忘记粘贴“按钮”——启动 ajax 请求的源代码。它是“提交”类型的输入，因此在成功检索响应后默认重新加载页面......所以 e.preventDefault();是要走的路。

谢谢大家。

【讨论】：