ホームページ  >  記事  >  ウェブフロントエンド  >  jquery.ajax_jquery の beforeSend メソッドの使用方法の概要

jquery.ajax_jquery の beforeSend メソッドの使用方法の概要

WBOY
WBOYオリジナル
2016-05-16 16:28:291688ブラウズ

一般的な効果は、ajax リクエストを行うときに、戻る前に小さな回転読み込みアイコンまたは「コンテンツ読み込み中...」が表示され、データがリクエストされていることをユーザーに知らせることです。これは、beforeSend メソッドを使用して実現できます。

デモをダウンロード: ajax 読み込み

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

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

関数 test_ajax(){
$.ajax(
{
Type: "GET", // 通常、GET と POST の 2 つのタイプが使用されます。デフォルトは: GET
URL: "a.php", // (デフォルト: 現在のページのアドレス) リクエストを送信するアドレス
DataType: "html", //サーバーによって返されることが予期されるデータ型。
beforeSend:beforeSend, //リクエストを送信
Success:callback, //リクエストは成功しました
error:error,//リクエストエラー
complete:complete//リクエストが完了しました
});
}
関数 error(XMLHttpRequest, textStatus, errorThrown){
// 通常、textStatus と errorThown のいずれか 1 つだけが値
を持ちます。 $("#showResult").append("
リクエストエラー!
");
}
関数 beforeSend(XMLHttpRequest){
$("#showResult").append("
");
}
function complete(XMLHttpRequest, textStatus){
$("#showResult").remove();
}
関数コールバック(msg){
$("#showResult").append("
リクエストが成功しました、返された番号:" msg "
");
}

beforeSend メソッドは、リクエストをサーバーに送信する前にいくつかの処理関数を追加するために使用されます。これは、ajax リクエストが開始される前にトリガーされる ajax イベントで、通常、ユーザーは XMLHttpRequest オブジェクトを変更できます (追加のヘッダー情報の設定など)。ajax イベントの説明については、ドキュメントを参照してください。 http://docs.jquery.com/Ajax_Events

多くの Web サイトで、コンテンツの読み込み中に「データを読み込んでいます。お待ちください」というプロンプトが表示され、コンテンツの読み込み後にコンテンツが表示される状況も確認されています。コンテンツがロードされるときに、読み込みプロンプトとして表示されるデフォルトのテキストを設定できます。ID セレクターを使用して、タグ内のテキストを最終コンテンツに置き換えることができます。これを使用して beforeSend を置き換えると、より効率的になります。

いつ beforeSend を使用するか、いつテキスト置換を使用するかは、ajax リクエストの前後で表示する DOM 要素が一貫しているかどうかによって決まります。表示する DOM 要素がリクエストの前にすでに存在している場合は、上記のテキスト置換メソッドを使用します。さらに他の要件を追加する必要がある場合は、 beforeSend を使用して処理する方が良いでしょう。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。