如何调试 jquery AJAX 调用？答案

【问题标题】：How do I debug jquery AJAX calls?如何调试 jquery AJAX 调用？
【发布时间】：2014-03-20 18:45:38
【问题描述】：

我一直在努力让 AJAX 与 Jquery 一起工作。到目前为止，我最大的问题是我真的不知道如何找出我在哪里犯了错误。我真的没有调试 AJAX 调用的好方法。

我正在尝试设置一个管理页面，其中我想要执行的功能之一是更改我的 SQL 数据库中设置的权限。我知道 .click 函数正在被触发，所以我缩小了范围，但我不确定从 AJAX 调用到 SQL 查询的链中哪里出错了。

我的 .js 代码：

$('#ChangePermission').click(function(){
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
        'user': document.GetElementById("user").value,
        'perm': document.GetElementById("perm").value
        }
    })
})

我的 .php 处理程序：

<?php  
require_once(functions.php);

echo $_POST["user"];

try{
    $DBH = mysql_start();

    $STH = $DBH->prepare("INSERT INTO people ( username, permissions ) values (?, ?)");

    $STH->bindParam(1, $_POST["user"]);
    $STH->bindParam(2, $_POST["perm"]);

    $STH->execute();
}
catch(PDOException $e){
    echo $e->getMessage;
}?>

mysql_start 是为我在其他 SQL 调用中成功使用的 PDO 函数设置的。

我这几天一直在研究和查找教程，但我终生无法弄清楚出了什么问题。是否有工具可以用来找出错误发生的位置？我显然对这个特定问题的答案很感兴趣，但我认为我在这里更大的问题是我不知道从哪里开始调试。感谢您的帮助！

【问题讨论】：

require_once('functions.php');?
看看这篇文章是否有帮助：stackoverflow.com/questions/6991306/…
首先，你的$_POST["user"]真的有价值吗？
为 ajax 调用设置成功和错误处理程序，并将日志记录在两者中。然后你可以看到发生了什么。
在 IE 中使用 F12，Network Sniffer。 或者当今所有浏览器中嵌入的网络嗅探器。但您实际上可能会问如何跟踪 Ajax 调用的结果，而不是调试它...

标签： javascript php jquery ajax

【解决方案1】：

使用 Chrome 开发工具回答 2020 年

调试任何 XHR 请求：

打开 Chrome 开发工具 (F12)
在控制台中右键单击您的 Ajax url

对于 GET 请求：

点击在新标签页中打开

对于 POST 请求：

点击在网络面板中显示
在网络面板中：
1. 点击您的请求
2. 点击回复标签查看详情

【讨论】：

【解决方案2】：

通过添加这样的成功和错误回调使您的 JQuery 调用更加健壮：

 $('#ChangePermission').click(function() {
     $.ajax({
         url: 'change_permission.php',
         type: 'POST',
         data: {
             'user': document.GetElementById("user").value,
             'perm': document.GetElementById("perm").value
         },
         success: function(result) { //we got the response
             alert('Successfully called');
         },
         error: function(jqxhr, status, exception) {
             alert('Exception:', exception);
         }
     })
 })

【讨论】：

嗯，当我尝试这样做时，.js 文件甚至没有加载。注释掉成功和错误部分使其再次工作。不知道这是怎么回事。
从不建议在评论中抛出错误，因为它会将 UI 错误情况暴露给每个用户。更好的方法可能是使用带有红色字体的 console.log。
这会引发Object object 错误。不知道如何继续

【解决方案3】：

这是我为了在 ajax 调用后调试并将 php 错误放入 javascript console.log 所做的：

    $('#ChangePermission').click(function () {
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
            'user': document.GetElementById("user").value,
            'perm': document.GetElementById("perm").value
        },
        success: function (data) {
            console.log(data);  
        },
        error: function (data) {
            console.log(data);
        }
    });
});

在 php 方面，我首先要求将所有错误返回到字符串 concat 并以 json 编码响应的形式回显，该响应也将包括 php 错误消息（如果有）。

<?php

error_reporting(E_ALL);
require_once(functions . php);
$result = "true";
$DBH = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
$DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$STH = $DBH->prepare("INSERT INTO people ( username, permissions ) values (?, ?)");

if (isset($_POST["user"]) && isset($_POST["perm"])) {
    $STH->bindParam(1, $_POST["user"], PDO::PARAM_STR);
    $STH->bindParam(2, $_POST["perm"], PDO::PARAM_STR);
}
try {
    $STH->execute();
} catch (PDOException $e) {
    $result .= $e->getMessage;
}
echo json_encode($result);
?>

【讨论】：

【解决方案4】：

Firebug 作为 Firefox (FF) 扩展目前（根据 01/2017）是调试来自 AJAX 调用的直接 javascript 响应的唯一方法。不幸的是，它的开发已经停止。从 Firefox 50 开始，由于兼容性问题，Firebug 也无法再安装 :-( 他们模仿 FF 开发者工具 UI 以某种方式召回 Firebug UI。

不幸的是，FF 原生开发者工具无法调试 AJAX 调用直接返回的 javascript。同样适用于 Chrome 开发。工具。

由于这个问题，我必须禁用 FF 的升级，因为我非常需要从当前项目的 XHR 调用中调试 JS。所以这里不是好消息 - 让我们希望调试直接 JS 响应的功能很快会被整合到 FF/Chrome 开发者工具中。

【讨论】：

【解决方案5】：

几乎可以使用任何现代浏览器来学习“网络”选项卡。请参阅此关于 How to debug AJAX calls 的 SO 帖子。

【讨论】：

【解决方案6】：

您可以使用浏览器中的“网络”标签 (shift+ctrl+i) 或Firebug。
但在我看来，更好的解决方案是使用外部程序（例如Fiddler）来监控/捕获浏览器和服务器之间的流量。

【讨论】：

这是唯一正确的答案。不要添加代码来调试，使用工具。
Chrome network tab 现在可能比 Firebug 更好。
Fiddler 允许您在发送之前修改 Ajax 请求。这是我正在寻找的功能。理想情况下，我想从 devtools 中做这样的事情。我需要在 Ajax 请求中添加/修改参数。 Firefox devtools 将其提供为“编辑并重新发送！”。到目前为止，Chrome 似乎没有运气。

【解决方案7】：

如果您使用的是 mozilla firefox，请安装一个名为 firebug 的插件。

在您的页面中，在 Mozilla 中按 f12 并打开 firebug。

在firebug中找到net标签，在这个标签中进入xhr标签。并重新加载您的页面。你会在xhrParamsHeadersResponseHTML和Cookies得到5个选项

因此，通过进入 response 和 html，您可以看到在您的 ajax 调用之后得到的响应。

如果您有任何问题，请告诉我。

【讨论】：

【解决方案8】：

只需在 jQuery 加载之后和代码之前添加它。

$(window).ajaxComplete(function () {console.log('Ajax Complete'); });
$(window).ajaxError(function (data, textStatus, jqXHR) {console.log('Ajax Error');
    console.log('data: ' + data);
    console.log('textStatus: ' + textStatus);
        console.log('jqXHR: ' + jqXHR); });
$(window).ajaxSend(function () {console.log('Ajax Send'); });
$(window).ajaxStart(function () {console.log('Ajax Start'); });
$(window).ajaxStop(function () {console.log('Ajax Stop'); });
$(window).ajaxSuccess(function () {console.log('Ajax Success'); });

【讨论】：

所以如果没有触发，这是否意味着根本没有调用 ajax 调用？我在 .click 函数中添加了一个 alert()，所以我知道它被触发了。不过，你的代码放在那里我没有得到任何东西..
我想是的。这应该会在浏览器控制台中显示 jQuery ajax 调用的每一步。

【解决方案9】：

安装 Firebig 以查看错误发生的位置。您还可以在 ajax 调用中设置回调以从 PHP 中返回错误消息。例如。

error: function(e){
     alert(e);
     }

【讨论】：

我下载了萤火虫，但我不确定在哪里寻找错误。当我单击按钮时，所有选项卡似乎都已加载并且没有任何变化（尽管我可以在 .click 函数中弹出一个警报窗口）。此外，当我添加错误或成功函数时，.js 文件甚至不会加载。在这一点上我很困惑。

【解决方案10】：

你可以使用成功功能，一旦看到这个jquery.ajax settings

 $('#ChangePermission').click(function(){
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
        'user': document.GetElementById("user").value,
        'perm': document.GetElementById("perm").value
        }
       success:function(result)//we got the response
       {
        //you can try to write alert(result) to see what is the response,this result variable will contains what you prints in the php page
       }
    })
})

我们也可以有error()函数

希望对你有帮助

【讨论】：

我尝试使用success函数，它似乎没有触发，所以我猜这是AJAX调用的问题。有什么方法可以获取有关它为什么不起作用的信息？