Как мне отлаживать вызовы jQuery AJAX?

Я работал над попыткой заставить 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 настроен для функции PDO, которую я успешно использую в своих других вызовах SQL.

Я изучал и смотрел учебники в течение нескольких дней, и я не могу, чтобы жизнь меня определяла, что происходит не так. Существуют ли инструменты, которые я могу использовать, чтобы выяснить, где происходит ошибка? Мне явно интересен ответ на эту конкретную проблему, но я думаю, что моя большая проблема здесь в том, что я понятия не имею, с чего начать с отладки. Спасибо за вашу помощь!

Сделайте свой 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(exception){alert('Exception:'+exception);} }) }) 

Используя практически любой современный браузер, вам нужно изучить вкладку «Сеть». См. Это сообщение SO о том, как отлаживать вызовы AJAX .

Вы можете использовать вкладку «Сеть» в браузере (shift + ctrl + i) или Firebug .
Но даже лучшее решение – на мой взгляд, – это дополнение к использованию внешней программы, такой как Fiddler для мониторинга / улавливания трафика между браузером и сервером.

если вы используете mozilla firefox, чем просто установите надстройку, называемую firebug .

На вашей странице нажмите f12 в mozilla и откроется firebug.

перейдите на вкладку net в firebug и в этой вкладке перейдите на вкладку xhr . и перезагрузите страницу. вы получите 5 вариантов в xhr Params Headers Response HTML и Cookies

поэтому, перейдя в response и html вы можете увидеть, какой ответ вы получаете после вашего вызова ajax.

Пожалуйста, дайте мне знать, если у вас есть какие-либо проблемы.

Firebug как расширение Firefox (FF) в настоящее время (по состоянию на 01/2017) является единственным способом отладки прямых ответов javascript от вызовов AJAX. К сожалению, его развитие прекращено. А с Firefox 50 Firebug также не может быть установлен больше из-за проблем с совместимостью 🙁 Они вроде как эмулируют интерфейс разработчика FF для разработчиков, чтобы каким-то образом напомнить интерфейс Firebug.

К сожалению, встроенные инструменты FF для разработчиков не могут отлаживать javascript, возвращенный непосредственно вызовами AJAX. То же самое относится к Chrome devel. инструменты.

Я должен отключить обновления FF из-за этой проблемы, так как мне очень нужно отлаживать JS из вызовов XHR в текущем проекте. Так что не хорошие новости здесь – будем надеяться, что функция отладки прямых ответов JS скоро будет включена в инструменты разработчика FF / 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'); }); 

вот что я сделал бы, чтобы отлаживать и получать ошибки 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 я бы начал с запроса на все ошибки, возвращенные в строку concat и echo, как 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); ?>