如何調試 jquery AJAX 調用？

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

mysql_start 是為我在其他 SQL 調用中成功使用的 PDO 函數設置的。

我幾天來一直在研究和查找教程，但我一生都無法弄清楚出了什么問題。 是否有工具可以用來找出錯誤發生的位置？ 我顯然對這個特定問題的答案很感興趣，但我認為我這里更大的問題是我不知道從哪里開始調試。 謝謝你的幫助！

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

您幾乎可以使用任何現代瀏覽器來學習“網絡”選項卡。 請參閱有關如何調試 AJAX 調用的SO 帖子。

Answer 3

您可以使用瀏覽器中的“網絡”選項卡 (shift+ctrl+i) 或Firebug 。
但在我看來，更好的解決方案是使用外部程序（例如Fiddler）來監視/捕獲瀏覽器和服務器之間的流量。

Answer 4

如果您使用的是 mozilla firefox，請不要只安裝一個名為firebug的插件。

在您的頁面中，在 mozilla 中按 f12，firebug 將打開。

轉到 firebug 中的net選項卡，然后在此選項卡中轉到xhr選項卡。 並重新加載您的頁面。 您將在xhr Params Headers Response HTML and 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 開發。 工具。

由於這個問題，我必須禁用 FF 的升級，因為我非常需要從當前項目的 XHR 調用中調試 JS。 所以這里不是好消息 - 讓我們希望調試直接 JS 響應的功能很快就會被整合到 FF/Chrome 開發者工具中。

Answer 6

2020 年 Chrome 開發工具的答案

要調試任何 XHR 請求：

1. 打開 Chrome 開發工具 (F12)
2. 在控制台中右鍵單擊您的 Ajax url

對於GET 請求：

• 單擊在新選項卡中打開

對於POST 請求：

1. 單擊“網絡”面板中的“顯示”

2. 在網絡面板中：

   1. 點擊您的請求

   2. 單擊響應選項卡以查看詳細信息

Answer 7

你可以使用成功功能，一旦看到這個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() 函數

希望這對你有幫助

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而要做的事情：

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