Как мне отлаживать вызовы 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
        }
    })
})

my.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.

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

Ответы

Ответ 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);
         }
     })
 })

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

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

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

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

Ответ 5

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

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

Я должен отключить обновления FF из-за этой проблемы, так как мне очень нужно отлаживать JS из вызовов XHR в текущем проекте. Таким образом, не хорошие новости здесь - пусть надеется, что функция отладки прямых ответов JS скоро будет включена в инструменты разработчика FF/Chrome.

Ответ 6

вы можете использовать функцию успеха, как только увидите настройки 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()

надеюсь, что это поможет вам

Ответ 7

Установите Firebig, чтобы узнать, где происходит ваша ошибка. Вы также можете настроить обратный вызов в своем вызове ajax, чтобы возвращать свои сообщения об ошибках с вашего PHP. Например.

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

Ответ 8

Просто добавьте это после загрузки 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'); });

Ответ 9

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