Jquery は Firefox FireBug プラグインを使用して Ajax ステップをデバッグします Explain_jquery

まず、例を使用して JQuery の Ajax 呼び出しプロセスを説明します。

実装されている機能の 1 つは次のとおりです: 支払い確認ボタンをクリックすると、残高支払い機能が実装されます:

1. まず、呼び出す必要がある関連関数を PHP ページのボタンにバインドします。

コードをコピー コードは次のとおりです:

$(関数(){

$("#pay_btn").bind("click",ABC.balancePay);

});

2. スクリプト オフィス:

$.post メソッドを使用する場合:

コードをコピーします コードは次のとおりです: var ABC = { BalancePay: function(event){

event.preventDefault();

var tthis = $(event.currentTarget);

var form = tthis.parents(‘form’);

var url = form.attr(‘アクション’);

var data = ‘code=15’ ;// $(‘#verifyCode’).val();

var jqXhr = $.post(url, data, unknown, ‘jsonp’);

jqXhr.done(function(datas){

//console.log('これはコンソールを通じて出力されます') //#4

$("#msg").text('結果:' データ);

});

}

$.post メソッドはコールバック関数を直接指定することもできます:

コードをコピー コードは次のとおりです。 var jqXhr = $.post(url,データ、関数 (データ){ $("#msg").text('結果:' データ);

}, 'jsonp');

$.ajax メソッドを使用して次のことを実現します:

コードをコピー コードは次のとおりです。 var jqXhr = $.post(url,データ、関数 (データ){ $("#msg").text('結果:' データ);

}, ‘jsonp’);

$.ajax メソッドを使用して次のことを実現します:

コードをコピー コードは次のとおりです。 var jqXhr = $.ajax({ タイプ: 「投稿」、

URL: URL,

データ: {コード: '15'},

データタイプ: ‘jsonp’,

scuess:function(data){

アラート('良い');},

error: function(XMLHttpRequest, textStatus, errorThrown) { // #3 このエラー関数は、解析が正しくない場合、エラー ボックスがポップアップ表示されます (XMLHttpRequest.readyState); ; });

3. サーバー側:

コードをコピー

コードは次のとおりです: public function actionInterPayProc($callback) {

//header("content-type: text/javascript");

//header(‘Content-type: text/html; charset=utf-8′);

$code = $_POST['code'];

//$code //#1 此处给出一个有语法错误的表达式

//echo $code; //#2 此处标记，用于后面调试说明；

…

$result = 1;

//echo $_POST['callback']. ‘(‘ . json_encode($result) . ‘);';//注意使用的编码方式需要和客户端请求保持一致；

exit(0);

}

调试工具 Firefox有强大FireBug 插件，现在比较新的浏览器如 Chrome 和 Safari，以及 IE 8都内置了调试工具，借助于这些调试工具，可以非常详细的查看 Ajax 的执行过程（chrome和firefox中调出调试工具的快捷键是ctrl+shift+c)； 以下使用FireBug；

1.使用firebug，查看回调：

对于Ajax方法，是通过异步执行的服务器端程序，如果服务器端出错，在页面上不会显示的，我们需要借助调试工具来查看；例如，将以上示例中#2的注释去掉，触发ajax请求一次，可以在控制台面板中查看到错误的返回结果：

サーバー側のプログラムでエラーが発生した場合も、エラーの原因は通常のページと同じですが、ajaxから返されたパネルで表示されるだけです(何も表示されません)。 Webブラウザのページに表示されます）。 ここで、表示する必要がある変数を出力するためにサーバー側で echo やその他のメソッドが使用されている場合、コールバック関数の名前が変更されているため、ajax 呼び出しの結果は失敗する必要があることに注意してください。変更されました。

たとえば、出力された変数が 333 の場合、最終的なコールバック結果は次のようになります: 333ajaxcallbak(1); クライアントは関数名 333ajaxcallbak を探していますが、それを解析できません。

2. error 関数を使用してエラー情報を出力します。

$.ajax() には、リクエストが失敗したときに呼び出される関数を指定できる error パラメーターがあります。ここで提供される情報はデバッグに非常に役立ちます

エラー: 関数 (XMLHttpRequest、textStatus、errorThrown)

エラー イベントによって返される最初のパラメータ XMLHttpRequest には、いくつかの有用な情報が含まれています:

XMLHttpRequest.readyState:

返されたステータス コードは、エラーの説明に対応します:

ステータスコード

0 - (初期化されていない) send() メソッドはまだ呼び出されていません

1 - (ロード中) send() メソッドが呼び出され、リクエストが送信されています

2 - (ロード完了) send() メソッドが実行され、すべての応答コンテンツが受信されました

3 - (対話型) 応答コンテンツを解析します

4 - (完了) 応答コンテンツの解析が完了し、クライアントで呼び出すことができます

XMLHttpRequest.status:

ここで返されるステータス コードは、ページが見つからなかったことを意味する 404 などの HTTP ステータスです。

textStatus:

「タイムアウト」、「エラー」、「notmodified」、「パーサーエラー」。

(デフォルト:自動判定(xmlまたはhtml)) リクエストが失敗した場合に呼び出すタイミング。 XMLHttpRequest オブジェクト、エラー メッセージ、および (オプションの) キャプチャされたエラー オブジェクトの 3 つのパラメータがあります。エラーが発生した場合、エラー メッセージ (2 番目のパラメーター) には、null に加えて、「timeout」、「error」、「notmodified」、および「parsererror」が含まれる場合があります。

このエラー関数を使用すると、プログラム エラーのトラブルシューティングが簡単になります。

たとえば、上記の #2 では、コメントを削除すると、エラーが発生した場合にコールバック関数名を変更することと同じになり、次のようにレポートされます。 3. console.log を使用して出力を出力します: (alert() も使用できます)

これは、デバッグ エクスペリエンスを向上させるための単なる補助的な方法です。 js で関心のある変数を追跡するには、alert() メソッドを使用して変数を出力できますが、頻繁にポップアップ ボックスが表示されるとイライラします。 console.log は代替手段であり、firebug プラグインのメソッドです。 console.log によって出力された変数の結果は、firebug コンソール パネルに表示されます。

考えられるエラーの理由:

1. 返された結果の形式が間違っている場合は、firebug で結果を確認できます。 2. JSON リクエストの場合、形式は厳密です:

error 関数を通じて報告されたエラーが次の場合: parsererror

考えられる理由は、サーバー側のスクリプトのエンコードの問題です。サーバー側の処理関数で処理される最初の行に、対応するヘッダー情報を追加できます。

例: header('Content-type: text/html; charset=utf-8');

もちろん、形式が間違っている可能性が高くなります:

コードをコピー

コードは次のとおりです: echo "{'re':'success '}" ;jquery は解析できません echo "{"re":"success"}"; エラーは発生しません 奇妙な json 形式の文字列を出力しないでください。出力しないと、jq1.4 バージョンは成功コールバックを実行しません。たとえば、{abc:1} または {'abc':1} の場合、

を出力するには、コード

をコピーします。コードは次のようになります。次のように: {"abc":1} {'success':true} が {"success":true} に変更されました