如何調試jQuery AJAX調用？

我一直在努力讓AJAX與Jquery協同工作。到目前爲止，我的大問題是，我不知道如何弄清楚我犯的錯誤。我真的沒有很好的方法來調試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功能。

我一直在研究和查找幾天的教程現在，我不能爲我的生活找出什麼是錯的。是否有工具可以用來確定錯誤發生的位置？我對這個特定問題的答案顯然很感興趣，但我認爲我更大的問題在於，我不知道從哪裏開始進行調試。謝謝你的幫助！

來源

2014-02-20 user2619631

'require_once（'functions.php'）;'？ – hjpotter92

看看這篇文章是否有幫助：http://stackoverflow.com/questions/6991306/how-do-i-debug-a-jquery-ajax-request – HackerKarma

首先，你的'$ _POST [「user」]'真的有一個值？ – Vainglory07

請通過添加成功和錯誤回調這樣您的通話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); 
     } 
    }) 
})

來源

2014-02-20 03:34:03 Habrashat

嗯，當我試過時，.js文件甚至沒有加載。評論成功和錯誤部分使其重新工作。不知道發生了什麼。 – user2619631

我的不好！錯過了逗號......現在應該工作。 – Habrashat

從不建議在評論中拋出錯誤，因爲它會向每個用戶公開UI錯誤情況。更好的方法可能是使用console.log和紅色字體。 – vibs2006

可以用成功的功能，一旦看到這個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 
     } 
    }) 
})

我們還可以有錯誤（）函數

希望這可以幫助你

來源

2014-02-20 03:29:35

我試過使用成功功能，它似乎沒有觸發，所以我想它的問題與AJAX調用。有什麼方法可以獲得有關爲什麼它不起作用的信息？ – user2619631

安裝Firebig，看看你的錯誤是發生。你也可以在你的ajax調用中設置一個回調來從你的PHP返回你的錯誤信息。例如。

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

來源

2014-02-20 03:30:23 Chris

我下載了螢火蟲，但我不確定在哪裏看到錯誤。所有的選項卡似乎都被加載，並且當我點擊按鈕時沒有任何變化（儘管我可以在.click函數中彈出一個警告窗口）。另外，當我添加錯誤或成功函數時，.js文件甚至不會加載。在這一點上我很困惑。 – user2619631

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

來源

2014-02-20 03:52:45 tauzN

，所以如果沒有觸發，這是否意味着ajax調用根本不被調用？我在.click函數中添加了一個alert（），所以我知道這是被觸發的。儘管你的代碼放在那裏，但我沒有得到任何東西。 – user2619631

我這麼認爲。這應該在您的瀏覽器控制檯中顯示jQuery ajax調用的每一步。 – tauzN

使用幾乎任何現代瀏覽器，您需要了解網絡選項卡。看到這個帖子關於How to debug AJAX calls。

來源

2014-02-20 04:55:03 MonkeyZeus

如果您使用的是Mozilla Firefox而不是僅安裝一個名爲firebug的插件。

在你的頁面按f12在mozilla和螢火蟲將打開。

去螢火蟲net選項卡，在此選項卡進入xhr選項卡。並重新載入您的頁面。你會得到5個選項中xhrParamsHeadersResponseHTML和Cookies

所以在response去和html你可以看到你的Ajax調用後你得到它的迴應。

如果您有任何問題，請讓我知道。

來源

2014-02-20 05:58:44

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

來源

2016-03-27 08:37:12

這是唯一正確的答案。不要添加代碼來調試，使用工具。 – Liam

這些天[Chrome網絡標籤]（https://developer.chrome.com/devtools/docs/network）可能比Firebug相當。 – Liam

Fiddler允許您在發送Ajax請求之前修改它們。這是我正在尋找的功能。理想情況下，我想從devtools內部做這樣的事情。我需要在Ajax請求中添加/修改參數。 Firefox devtools提供「編輯並重新發送！」。目前看來，Chrome並沒有運氣。 – Rolf

作爲Firefox（FF）擴展的Firebug當前（根據01/2017）是調試AJAX調用的直接javascript響應的唯一方法。不幸的是，它的發展已經停止。自從Firefox 50以來，由於兼容性問題，Firebug也無法安裝:-(它們是仿效FF開發工具UI以某種方式調用Firebug UI的。

不幸的是，FF本地開發人員工具無法調試javascript同樣適用於Chrome開發工具

由於這個問題我必須禁用FF升級，因爲我急需從當前項目的XHR調用中調試JS。 - 讓我們希望調試直接JS響應的功能很快就會融入到FF/Chrome開發者工具中。

來源

2017-01-01 21:27:48 lubosdz

這裏是我爲了調試和獲取php錯誤到JavaScript的console.log一個Ajax調用後：

$('#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端我會通過詢問所有的錯誤開始返回字符串連接和呼應因爲這將包括PHP錯誤消息的JSON編碼的響應，以及如果任何。

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

來源

2017-02-18 02:40:03 cpugourou

如何調試jQuery AJAX調用？

回答

相關問題