jquery.ajaxのbeforeSendメソッド(プログレスバー、「お待ちください」プロンプトなどを解決する .............................)。
ajaxでリクエストすると、リクエストが返される前に小さな回転するローディングアイコンまたは "コンテンツ読み込み中..."が表示されます。 は、データがリクエストされていることをユーザーに通知するために使用されます。これは beforeSend メソッドで行うことができます。
デモをダウンロードする AJAXローディング
コードは以下の通りです。
function test_ajax(){
$.ajax(
{
type:"GET",// 通常は2つのタイプが使用されます。GET,POST。デフォルトは GET
url:"a.php",//(default: 現在のページのアドレス) リクエストを送信するアドレスです。
dataType:"html",// サーバーから返されることが期待されるデータのタイプです。
beforeSend:beforeSend, //送信要求
success:コールバック, //リクエスト成功
error:error,//Error on request
complete:complete//リクエストが完了しました。
});
}
function error(XMLHttpRequest, textStatus, errorThrown){ (XMLHttp リクエスト、テキストステータス、エラースロー)。
// 通常はtextStatusとerrorThownのどちらか一方だけが値を持ちます。
$("#showResult").append("<div>Request error! </div>") を実行します。
}
関数 beforeSend(XMLHttpRequest){
$("#showResult").append("<div><img src='loading.gif' /><div>") を実行します。
}
function complete(XMLHttpRequest, textStatus){.
$("#showResult").remove() を実行します。
}
関数コールバック(msg){
$("#showResult").append("<div>Request successful, callback number:"+msg+"<div>") を追加します。
}
メソッド beforeSend は、サーバーにリクエストを送信する前に、いくつかのハンドラ関数を追加するために使用されます。これは ajax リクエストが開始される前に発生する ajax イベントで、通常、ユーザは XMLHttpRequest オブジェクトを変更できます (例: 追加のヘッダー情報を設定する)。ajaxイベントの説明については、以下のドキュメントを参照してください。 http://docs.jquery.com/Ajax_Events
また、多くのサイトでは、コンテンツの読み込み中に "データ読み込み中です、お待ちください" と表示し、読み込みが終了したらコンテンツを表示するという状況が見受けられます。ロードプロンプトとして表示するデフォルトテキストを設定し、コンテンツがロードされたら、IDセレクタを介してそのタグ内のテキストを最終的なコンテンツに置き換えることができるのです。beforeSendをこれに置き換えると、より効率的です。
beforeSendをいつ使うか、テキスト置換をいつ使うかは、ajaxリクエストの前後に表示するDOM要素が一致しているかどうかで決まります。もし表示するDOM要素がリクエストの前に既に存在していたなら、上記のようにテキスト置換で処理する方が良いでしょう。.
関連
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
Vueの「データを聴く」原則を解説
-
Vueのフォームイベントのデータバインディングの説明
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
jq は html ページとデータを動的に分割する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
JSアレイループと効率解析の比較
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
Vueのクラススタイルの使い方の詳細
-
[解決済み] テスト
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
フロントエンド - $(...) [0].attr は関数ではありません。