如何调试 jquery AJAX 调用？

IT技术 javascript php jquery ajax
2021-02-21 08:33:39

我一直在努力让 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 函数设置的。

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

6个回答

通过添加这样的成功和错误回调，使您的 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 文件甚至没有加载。注释掉成功和错误部分使其再次工作。不知道这是怎么回事。
2021-04-22 08:33:39
永远不建议在评论中抛出错误，因为它会将 UI 错误条件暴露给每个用户。更好的方法可能是使用带有红色字体的 console.log。
2021-04-30 08:33:39
这Object object对我来说是一个错误.. 不知道如何继续
2021-05-11 08:33:39

您几乎可以使用任何现代浏览器来学习“网络”选项卡。请参阅有关如何调试 AJAX 调用的SO 帖子。

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

这是唯一正确的答案。不要添加代码来调试，使用工具。
2021-04-18 08:33:39
Fiddler 允许您在发送 Ajax 请求之前修改它们。这是我正在寻找的功能。理想情况下，我想在 devtools 中做这样的事情。我需要在 Ajax 请求中添加/修改参数。Firefox 开发工具提供“编辑并重新发送！”。到目前为止，Chrome 似乎没有运气。
2021-04-22 08:33:39
该浏览器的网络选项卡可能是更好比萤火虫相当于这些天。
2021-05-16 08:33:39

如果您使用的是 mozilla firefox，则不要只安装一个名为firebug.

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

转到netfirebug 中的选项卡，然后在此选项卡中进入xhr选项卡。并重新加载您的页面。您将获得 5 个选项，xhr Params Headers Response HTML并且Cookies

所以在去response和html你可以看到你的Ajax调用后你得到它的回应。

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

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

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

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

其它你可能感兴趣的问题
上一篇使用 Javascript 或 Jquery 获取自定义属性的值 下一篇是否可以在不循环的情况下在其父节点中获取元素的数字索引？