ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery Ajax はデータのロード時に非同期でロード アニメーションを表示します

jQuery Ajax はデータのロード時に非同期でロード アニメーションを表示します

高洛峰
リリース: 2016-12-28 11:04:21
オリジナル
1978 人が閲覧しました

バックグラウンドデータをロードする Ajax はそれほど詳細ではありません。

以下のコードを見てください。まず、フロントデスクにコードを配置します

<div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;">
  <img alt="加载中..." src="../../Images/loading1.gif"/>
</div>
ログイン後にコピー

まず、この画像アニメーションをjsスクリプトファイルに隠します

コードは次のとおりです

$(document).ready(function () { $("#loadgif").hide();});
ログイン後にコピー

その後、非同期ajax送信リクエストコードは以下の通りです

$(function () {
var find = new Find();
//alert(find.Template);
$.ajaxSetup({
cache: false,
async: true,
global: false,
type: "POST"
});
$("#queryBtn").click(function () { $("#loadgif").show(); find.Get() });
ログイン後にコピー

......

注:

async: true,

queryBtnボタンをクリックするとアニメーション表示

$("#loadgif").show();
ログイン後にコピー

が呼び出されます

その後、リクエストを送信します

リクエストが受信されるまで待ちます

$("#loadgif").hide();
ログイン後にコピー

効果は次のとおりです:

jQuery Ajax 加载数据时异步显示加载动画

上記は、編集者が紹介した jQuery Ajax です。データをロードするときにロードアニメーションを非同期に表示するには、ご質問があればメッセージを残してください。すぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

データ読み込み時の jQuery Ajax 非同期表示読み込みアニメーションに関する詳細については、PHP 中国語 Web サイトをご覧ください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート