如何调试jquery AJAX调用?

2020/12/31 04:41 · php ·  · 0评论

我一直在努力使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。

我已经研究和查找了几天的教程,但我一生都无法找出问题所在。有没有我可以用来确定错误发生在哪里的工具?我显然对这个特定问题的答案很感兴趣,但是我认为这里更大的问题是我不知道从哪里开始调试。谢谢你的帮助!

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

使用几乎所有现代浏览器,您都需要了解“网络”标签。请参阅此SO帖子,了解如何调试AJAX调用

您可以使用浏览器(shift + ctrl + i)或Firebug中的“网络”标签

但是,我认为,更好的解决方案是除了使用
Fiddler之类的外部程序来监视/捕获浏览器和服务器之间的流量。

如果您使用的是mozilla firefox,则不仅仅安装名为的加载项firebug

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

转到net萤火虫中标签,然后在此标签中进入xhr标签。并重新加载您的页面。您将获得5个选项,xhr Params Headers Response HTML并且Cookies

所以在去responsehtml你可以看到你的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开发人员工具。

Chrome开发人员工具2020年答案

要调试任何XHR请求

  1. 打开Chrome DEV工具(F12)
  2. 在控制台中右键单击您的Ajax URL

Chrome控制台Ajax请求

对于GET请求

  • 点击在新标签页中打开

对于POST请求

  1. 在“网络”面板中单击“显示”

  2. 在“网络”面板中

    1. 点击您的要求

    2. 单击响应选项卡以查看详细信息
      Chrome联网面板的响应标签

您可以使用成功功能,一旦看到此jquery.ajax设置

 $('#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()函数

希望这对您有帮助

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

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

只需在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调用后进行调试并将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);
?>
本文地址:http://php.askforanswer.com/ruhediaoshijquery-ajaxdiaoyong.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!