Javascript 从 AJAX 响应读取 JSON 结果答案

【问题标题】：Javascript Reading JSON result from AJAX responseJavascript 从 AJAX 响应读取 JSON 结果
【发布时间】：2014-03-13 08:38:19
【问题描述】：

我有一个 javascript 文件，它对服务器上的一个 php 文件进行 AJAX 调用，该文件返回 JSON 编码数据。 PHP 文件可以返回成功或失败，具体取决于大约十几个不同的消息，如下所示：

if ( something here ) {
    if( something else here ) {
        if( more tests here ) {
            $response['success'] = 'Successfully did something.';
        } else {
            $response['success'] = 'Successfully made this work';
        }
    } else {
        $response['error'] = 'Failed to make the donuts.';  
    }
} else {
    $response['error'] = 'I need more information!';
}
echo json_encode($response);
exit;

我在前端有 javascript/jquery，它正在检查响应失败条件并显示警告框并执行一些其他相关操作，具体取决于。

$.post(ajaxurl, data, function(response) {
    if( response.hasOwnProperty("success") ) {
        if( $(this).is( ":checked" ) ) {
            $(this).removeAttr( "checked" );
        } else {
            $(this).attr( "checked", "true" );
        }
        alert( response["success"] );
    } else {
        alert( "Sorry, something went wrong.  \nError: " + response["error"] );
    }
});

问题是，无论我如何检查成功条件，它总是显示带有 undefined 的 response['error'] 的错误消息我已经尝试测试 typeOf response['success'] != "undefined" 和许多其他方法来查看成功值已设置，但似乎没有任何效果。我收到一个回复，当我 console.log 它看起来像这样：{ "success", "Successfully did something." } 我在阅读消息时做错了什么？

【问题讨论】：

做console.log响应（检查你是否得到响应）然后如果（response.success）不做hasOwnProperty它不是必需的。
你使用哪个版本的jquery？
它是最新版本的 jquery，我收到了回复
@dpegasusm：但是你得到了什么响应？

标签： javascript php jquery ajax json

【解决方案1】：

好吧，上面的人已经给出了答案，但是我在您的代码中发现了另一个问题：

我猜这个 post 语句是在复选框的事件处理程序中调用的，您想在响应后修改此复选框的状态。但是this对象不再是post回调函数中的checkbox，而是post对象。因此，您会发现您的代码不会像您预期的那样在响应后更改复选框的状态。

你可以像这样修改你的代码：

var $ele = $(this);
$.post(url, data, function() {
...
if( $(this).is( ":checked" ) ) {
            $ele.removeAttr( "checked" );
        } else {
            $ele.attr( "checked", "true" );
        }
...
}, "json");

编辑：

好吧，上面的代码不够优雅，不能引入不必要的局部变量，回调函数必须将父函数的局部变量保留在内存中（作为闭包的结果），所以下面是一个更好的选择：

$.post(url, data, $.proxy(function() {
...
//use "this" object just like the original code of author
...
}, this), "json");

【讨论】：

非常感谢！我只是想弄清楚！

【解决方案2】：

在您的 ajax 调用中使用 dataType 参数并将其设置为 json。顺便说一句，你可以这样做：

alert( response.success );

由于ajax调用返回的对象或者“data”回调参数实际上是一个json对象，而不是一个数组。

【讨论】：

【解决方案3】：

使用前需要parseJSON回复，

$.post(ajaxurl, data, function(response) {
    var response=JSON.parse(response);
    //then your code
});

或

您可以在 AJAX 调用中将 datatype 属性用作 json，例如：

$.post(ajaxurl, data, function(response) {
     //your code
}, "json");

【讨论】：

最好使用dataType 选项。
是的，它也是一个选项...:)
很高兴我能帮上忙.. :)

【解决方案4】：

通过在末尾添加数据类型来简单地编辑您的 JavaScript 代码（请参阅以下代码 sn-p 中的最后一个参数）请参考 https://api.jquery.com/jQuery.post/

$.post(ajaxurl, data, function(response) {
    if( response.hasOwnProperty("success") ) {
        if( $(this).is( ":checked" ) ) {
            $(this).removeAttr( "checked" );
        } else {
            $(this).attr( "checked", "true" );
        }
        alert( response["success"] );
    } else {
        alert( "Sorry, something went wrong.  \nError: " + response["error"] );
    }
},'json');

【讨论】：