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');もちろん、形式が間違っている可能性が高くなります:
コードをコピー
奇妙な json 形式の文字列を出力しないでください。出力しないと、jq1.4 バージョンは成功コールバックを実行しません。たとえば、{abc:1} または {'abc':1} の場合、
を出力するには、コード

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページ コンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

最近のニュースによると、Mozilla は Firefox 112 の安定版をリリースしましたが、次のメジャー バージョンである Firefox 113 がベータ チャネルに入り、AV1 アニメーション、強化されたパスワード ジェネレーター、およびピクチャ イン ピクチャ機能をサポートすることも発表しました。 Firefox 113の主な新機能・特徴は以下の通り:AV1形式のアニメーション画像(AVIS)のサポート、特殊文字の導入によるパスワード生成機能のセキュリティ強化、ピクチャーインピクチャー機能の強化、巻き戻しのサポート、ビデオ時間の表示モードでは、Debian および Ubuntu ディストリビューション用の公式 DEB インストール ファイルが提供されます。ブックマーク インポート機能が更新され、インポートされたブックマークのアイコンがデフォルトでサポートされます。サポートされているハードウェアでは、w を使用してハードウェア アクセラレーションによる AV1 ビデオ デコードがデフォルトで有効になります。
