まず、例を使用して JQuery の Ajax 呼び出しプロセスを説明します。
実装されている機能の 1 つは次のとおりです: 支払い確認ボタンをクリックすると、残高支払い機能が実装されます:
1. まず、呼び出す必要がある関連関数を PHP ページのボタンにバインドします。
$(関数(){
$("#pay_btn").bind("click",ABC.balancePay);
});
2. スクリプト オフィス:
$.post メソッドを使用する場合:
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 メソッドはコールバック関数を直接指定することもできます:
$("#msg").text('結果:' データ);
}, 'jsonp');
$.ajax メソッドを使用して次のことを実現します:
$("#msg").text('結果:' データ);
}, ‘jsonp’);
$.ajax メソッドを使用して次のことを実現します:
タイプ: 「投稿」、
URL: URL,
データ: {コード: '15'},
データタイプ: ‘jsonp’,
scuess:function(data){
アラート('良い');},
error: function(XMLHttpRequest, textStatus, errorThrown) { // #3 このエラー関数は、解析が正しくない場合、エラー ボックスがポップアップ表示されます (XMLHttpRequest.readyState);
;
});
3. サーバー側:
コードをコピー
{
//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');もちろん、形式が間違っている可能性が高くなります:
コードをコピー
を出力するには、コード