jQuery での Ajax エラーのデバッグ分析

jQuery は ajax を非常にうまくカプセル化します。しかし、日々の開発では、依然として ajax エラーに遭遇することがあります。ここでは、ajax エラーの簡単な分析を示します

jQuery の一般的な使用法は次のとおりです。Ajax は、post を通じて「トムとジェリー」データを xxx.php ファイルに送信します。成功した場合は返されたデータが出力され、失敗した場合はエラーの理由が出力されます。

$.ajax({
 url:"xxx.php",
 type:"post",
 datatype:"json",
 data:{"cat":"tom","mouse":"jack"},
 success:function(data){
 console.log(data);
 },
 error:function(jqXHR,textStatus,errorThrown){<br> console.log(jqXHR.);<br> console.log(textStatus);<br> console.log(errorThrown);<br> }
});

jQueryの公式ドキュメントによると、ajaxのerrorにはjqXHR、textStatus、errorThrownという3つのパラメータがあります。

jqXHR には、

1.readyState という 4 つの属性もあります: 現在の状態、0-初期化されていない、1-読み込み中、2-読み込み済み、3-データ相互作用、4-完了。

2.status: 一般的な 404、500、その他のエラー コードなどの HTTP ステータス コードが返されました。

3.statusText: ステータス コードに対応するエラー メッセージ (404 エラー メッセージが見つかりません、500 は内部サーバー エラーなど)。

4.responseText: サーバーの応答によって返されるテキスト情報

textStatus と errorThrown はどちらも文字列型で、それぞれ返されるステータスとサーバー エラー情報です。

通常の状況では、ajax は error 関数に入り、textStatus と jqXHR.readyState を出力します。おそらく、ajax がエラーを報告する理由がわかるでしょう。それでも不明な場合は、すべてのパラメータを出力します。

ここでは、ajax エラーが発生するときに発生する状況の概要を示します。将来、新しい特殊な状況が発生した場合はさらに追加します。

ケース 1

問題: フロントエンドは jQuery フレームワークを使用し、バックエンドとの対話には ajax が使用されます。バックエンドは php+mysql です。 ajax がエラーを報告していることがわかります (ajax はポストタイプ、json 形式を使用し、リクエストデータは Json オブジェクトです)。出力された textStatus は「parsererror」であり、解析エラーを意味します。

処理: この出力は、ajax がバックエンド (サーバー側) と正常に対話し、バックエンドが応答してテキスト情報を返したことを示しています。しかし、フロントエンドはテキストの解析中にエラーを受け取りました。このとき、まずバックエンド応答のテキスト情報を確認する必要があります。方法は 2 つあり、1 つは jqXHR.responseText を印刷する方法、もう 1 つは Google Chrome の F12 キーを押して NetWork で表示する方法です (他のブラウザも利用可能)。このとき表示される情報は 5{"status": "success"} です。このテキストに json オブジェクトのデータが含まれていることは難しくありませんが、完全な json データではありません。エラーが発見された場合は、php ファイルに直接移動して、対応する情報を変更し、冗長な印刷を削除します。問題を解く。 さらに、修飾されていない json オブジェクト データもこの問題を引き起こす可能性があります。たとえば、{'status':'success'} データには一重引用符が含まれています。

ケース 2

問題: フロントエンドは jQuery フレームワークを使用し、ajax を使用してバックエンドと対話し、バックエンドにデータベースを操作させます。バックエンドは Nodejs です。 ajax が応答せず、成功コールバック関数もエラー コールバック関数も存在しないことが判明しました。

処理: まず、関数が実装されているかどうかを確認し、バックエンドが実際に処理を実行し、データベースが関連する変更操作を完了していることを確認します。問題は非常に明らかです。処理後にバックエンドがフロントエンドに応答しませんでした。これは、バックエンドの処理が完了した後に関連する応答コードを追加することで解決できます。実際には、ajax エラー ステータス コードがバックエンドによって送信されていることがわかります。

上記は個人的な開発中に遭遇した問題とその解決策の概要です。何か間違っている場合は、修正してください。