web-dev-qa-db-ja.com

jquery AJAX呼び出しをデバッグするにはどうすればよいですか？

私はAJAXを取得してJqueryで作業しようとしています。これまでの私の最大の問題は、どこでミスを犯しているかを把握する方法がわからないことです。 AJAX呼び出しをデバッグする良い方法が本当にない。

私が作成したい機能の1つが、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関数のセットアップです。

私はここ数日間、チュートリアルの調査と検索を行ってきましたが、私の人生では何が間違っているのかを理解することはできません。エラーが発生している場所を特定するために使用できるツールはありますか？私は明らかにこの特定の問題に対する答えに興味がありますが、ここでの私のより大きな問題は、どこからデバッグを始めるべきかわからないということです。ご協力いただきありがとうございます！

javascriptphpjqueryajax
31
user2619631

次のような成功およびエラーコールバックを追加して、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);
         }
     })
 })
31
Habrashat

ほぼすべての最新のブラウザを使用して、[ネットワーク]タブを学習する必要があります。こちらをご覧くださいSO投稿について デバッグ方法AJAX呼び出し 。

14
MonkeyZeus

ブラウザの[ネットワーク]タブ（shift + ctrl + i）または Firebug を使用できます。
しかし、より良い解決策-私の意見では-は、ブラウザとサーバー間のトラフィックを監視/キャッチするために Fiddler などの外部プログラムを使用することに加えてです。

7
Kurt Larsen

mozilla firefoxを使用している場合は、firebugというアドオンをインストールするだけです。

ページでmozillaのf12を押すと、firebugが開きます。

firebugのnetタブに移動し、このタブでxhrタブに移動します。ページをリロードします。 xhrParamsHeadersResponseHTMLおよびCookiesに5つのオプションがあります。

したがって、responseとhtmlにアクセスすると、ajax呼び出し後にどの応答が得られているかを確認できます。

問題がある場合はお知らせください。

2
Nishant Solanki

Firefox（FF）拡張機能としてのFirebugは、現在（2017年1月現在）AJAX呼び出しからの直接JavaScript応答をデバッグする唯一の方法です。残念ながら、開発は中止されています。互換性の問題のため、Firebugもインストールすることはできません。

残念ながら、FFネイティブ開発者ツールは、AJAX呼び出しによって直接返されたJavaScriptをデバッグできません。同じことがChrome開発ツールに当てはまります。

現在のプロジェクトのXHR呼び出しからJSをひどくデバッグする必要があるため、この問題のためにFFのアップグレードを無効にしなければなりません。良いニュースではありません-直接JS応答をデバッグする機能がFF/Chrome開発者ツールにすぐに組み込まれることを期待しましょう。

2
lubosdz

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

成功関数を使用できます。一度これを参照してください 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
       }
    })
})

error（）関数を持つこともできます

これがあなたを助けることを願っています

0
ɹɐqʞɐ zoɹǝɟ

Firebigをインストールして、エラーが発生している場所を確認します。また、ajax呼び出しでコールバックを設定して、PHPからエラーメッセージを返すこともできます。例えば。

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

これは、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);
?>
0
cpugourou