Javascript 如何调试jQueryAjax调用？

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

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

My.js代码：

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

my.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函数设置的

---

我已经研究和查找教程好几天了，我一辈子都搞不清楚到底出了什么问题。有没有工具可以用来找出错误发生的地方？我显然对这个特定问题的答案感兴趣，但我认为这里更大的问题是我不知道从哪里开始调试。谢谢你的帮助

一旦看到这一点，您就可以使用success函数

我们还可以使用error（）函数

---

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

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

---

通过如下方式添加成功和错误回调，使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);
         }
     })
 })

---

只需在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'); });

---

使用几乎任何现代浏览器，您都需要了解网络选项卡。

---

如果您使用的是mozilla firefox，请参阅本文。

，而不仅仅是安装名为

firebug

的附加组件

在您的页面中，在mozilla中按f12，firebug将打开

进入firebug中的

net

选项卡，在此选项卡中进入

xhr

选项卡。 然后重新加载页面。 您将在

xhr

Params

标题

响应

HTML

和

Cookies

因此，通过进入

response

和

html

可以看到在ajax调用后得到的响应

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

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

Firebug as Firefox（FF）扩展目前（根据2017年1月）是调试AJAX调用直接javascript响应的唯一方法。不幸的是，它的开发已经中断。自从Firefox 50以来，Firebug也由于兼容性问题而无法再安装：-（他们模拟了FF开发者工具UI，以某种方式调用Firebug UI

不幸的是，FF本机开发工具无法调试AJAX调用直接返回的javascript。这同样适用于Chrome devel.tools

---

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

为了调试php错误并将其导入javascript，我将做以下工作ajax调用后的ole.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和echo的所有错误作为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);
?>

2020使用Chrome开发工具回答问题 要调试任何XHR请求：

打开Chrome开发工具（F12）

在控制台中右键单击Ajax url

对于获取请求：

• 单击“在新选项卡中打开”

对于POST请求：

单击“网络”面板中的“显示”

在网络面板中：

点击你的请求

单击响应选项卡查看详细信息

---

require_once（'functions.php'）；

？看看这篇文章是否有用：首先，你的

$\u文章[“user”]

真的有价值吗？为ajax调用设置一个成功和错误处理程序，并同时登录。然后你可以看到发生了什么。在IE中使用F12，网络嗅探器。或者现在所有浏览器中都嵌入了网络嗅探器。但你可能会问如何跟踪ajax调用的结果，而不是调试它……我尝试使用success函数，它似乎没有触发，所以我猜这是AJAX调用的问题。有没有办法获取有关它为什么不工作的信息？嗯，当我尝试这样做时，甚至没有加载.js文件。注释成功和错误部分会使它再次工作。不确定这是怎么回事。注释时抛出错误永远不会记录因为它会向每个用户暴露UI错误条件。更好的方法可能是使用带有红色字体的console.log。这会为我抛出一个

Object

错误。不知道如何处理。所以如果没有触发任何操作，这是否意味着根本没有调用ajax调用？我添加了一个警报（）到.click函数，所以我知道它被触发了。但是，我没有从你的代码中得到任何东西。我想是的。这应该会在你的浏览器控制台中显示jQuery ajax调用的每一步。我下载了firebug，但我不确定确切的查找位置以捕获错误。所有的选项卡似乎都已加载，当我单击时没有任何更改单击按钮（尽管我可以在.click函数中弹出一个警报窗口）。此外，当我添加error或success函数时，.js文件甚至没有加载。我对此感到非常困惑。这是唯一正确的答案。不要添加代码进行调试，使用工具。这可能比现在的Firebug更好。Fiddler允许您在发送Ajax请求之前修改它们。这就是功能我在找。理想的情况下，我想做这样的一件事

<?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);
?>