Question

我一直在努力让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;
}?>

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

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

Answer 1

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

Answer 2

使用几乎任何现代浏览器，您需要学习网络选项卡。请参阅此SO帖子How to debug AJAX calls。

Answer 3

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

Answer 4

如果你使用的是mozilla firefox而不是安装一个名为firebug的插件。

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

转到firebug中的net标签，然后在此标签页中的xhr标签中。并重新加载您的页面。您将在xhr Params Headers Response HTML和Cookies

中获得5个选项

因此，进入response和html，您可以看到在您的ajax通话后获得的回复。

如果您有任何问题，请与我们联系。

Answer 5

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

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

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

Answer 6

Chrome开发工具的2020年答案

调试任何XHR请求：

打开Chrome DEV工具（F12）
在控制台中右键单击您的Ajax网址

对于 GET请求：

点击在新标签页中打开

对于 POST请求：

在“网络”面板中单击“ 显示”
在“ 网络”面板中：
1. 单击您的请求
2. 点击响应标签以查看详细信息

Answer 7

您可以使用成功功能，一旦看到此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（）函数

希望这可以帮助你

Answer 8

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

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

Answer 9

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

Answer 10

这是我为了调试并在ajax调用之后将php错误输入javascript console.log而做的事情：

count = sum(a > b for a, b in zip(lst, lst[1:]))

在php方面，我会首先要求将所有错误返回到字符串concat和echo作为json编码的响应，其中包括php错误消息（如果有的话）。

    $('#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);
        }
    });
});

如何调试jquery AJAX调用？

10 个答案:

Chrome开发工具的2020年答案