web-dev-qa-db-fra.com

Comment déboguer jquery AJAX appelle?

Je me suis efforcé de faire en sorte que AJAX fonctionne avec Jquery. Mon gros problème jusqu’à présent est que je ne sais pas vraiment comment déterminer où je me suis trompé. n’ont pas vraiment le bon moyen de déboguer les appels AJAX.

J'essaie de configurer une page d'administration sur laquelle l'une des fonctions que je souhaite créer consiste à modifier les autorisations définies dans ma base de données SQL. Je sais que la fonction .click est en train de se déclencher, je l'ai donc réduite, mais je ne suis pas sûr de savoir où dans la chaîne AJAX appel à la requête SQL ne va pas.

Mon code .js:

$('#ChangePermission').click(function(){
    $.ajax({
        url: 'change_permission.php',
        type: 'POST',
        data: {
        'user': document.GetElementById("user").value,
        'perm': document.GetElementById("perm").value
        }
    })
})

mon gestionnaire .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;
}?>

Où mysql_start est configuré pour la fonction PDO que j'utilise avec succès dans mes autres appels SQL.

Je fais des recherches et je cherche des tutoriels depuis quelques jours maintenant et je ne peux pas pour toute la vie comprendre ce qui ne va pas. Existe-t-il des outils que je peux utiliser pour déterminer où l’erreur se produit? La réponse à ce problème spécifique m'intéresse évidemment, mais je pense que mon plus gros problème ici est que je ne sais pas par où commencer avec le débogage. Merci de votre aide!

javascriptphpjqueryajax
31
user2619631

Rendez votre appel JQuery plus robuste en ajoutant des rappels de succès et d’erreur comme ceci:

 $('#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);
         }
     })
 })
31
Habrashat

En utilisant à peu près n'importe quel navigateur moderne, vous devez apprendre à utiliser l'onglet Réseau. Voir ceci SO poste sur comment déboguer AJAX appelle) .

14
MonkeyZeus

Vous pouvez utiliser l'onglet "Réseau" du navigateur (shift + ctrl + i) ou Firebug .
Mais, à mon avis, une solution encore meilleure consiste à utiliser un programme externe tel que Fiddler pour surveiller/intercepter le trafic entre le navigateur et le serveur.

7
Kurt Larsen

si vous utilisez mozilla firefox, installez simplement un add-on appelé firebug.

Dans votre page, appuyez sur f12 dans mozilla et firebug s'ouvrira.

allez dans l'onglet net dans firebug et dans cet onglet, allez dans l'onglet xhr. et rechargez votre page. vous aurez 5 options dans xhrParamsHeadersResponseHTML et Cookies

donc en allant dans response et html, vous pouvez voir quelle réponse vous obtenez après votre appel ajax.

S'il vous plaît laissez-moi savoir si vous avez un problème.

2
Nishant Solanki

L’extension Firebug en tant que Firefox (FF) est actuellement (au 01/2017) le seul moyen de déboguer les réponses javascript directes des appels AJAX. Malheureusement, son développement est interrompu. Et depuis Firefox 50, le De plus, Firebug ne peut plus être installé en raison de problèmes de compatibilité :-( Ils utilisent une interface utilisateur émulée des outils de développement FF pour rappeler l’UI de Firebug.

Malheureusement, les outils de développement natifs FF ne sont pas en mesure de déboguer le code javascript renvoyé directement par les appels AJAX. Il en va de même pour Chrome devel. Tools.

Je dois avoir désactivé les mises à niveau de FF à cause de ce problème, car j’ai absolument besoin de déboguer JS à partir d’appels XHR sur le projet en cours. Ce n'est donc pas une bonne nouvelle ici. Espérons que la fonctionnalité permettant de déboguer les réponses JS directes sera bientôt intégrée aux outils de développement FF/Chrome.

2
lubosdz

Ajoutez simplement ceci après le chargement de jQuery et avant votre code.

$(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'); });
0
tauzN

vous pouvez utiliser la fonction de réussite, une fois voir ceci paramètres 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
       }
    })
})

on peut aussi avoir une fonction error ()

espérons que cela vous aide

0
ɹɐqʞɐ zoɹǝɟ

Installez Firebig pour voir où votre erreur se produit. Vous pouvez également configurer un rappel dans votre appel ajax pour renvoyer vos messages d'erreur de votre PHP. Par exemple.

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

voici ce que je ferais pour déboguer et obtenir les erreurs php dans javascript console.log après un appel 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);
        }
    });
});

sur le côté php, je commencerais par demander toutes les erreurs renvoyées à la chaîne concat et à l'écho sous forme de réponse codée JSON qui inclurait les messages d'erreur php, le cas échéant.

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