jQuery Ajax 加載數(shù)據(jù)時異步顯示加載動畫
ajax加載后臺數(shù)據(jù)就不說的那么細了。
看下面代碼首先前臺上放置代碼
<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,
當(dāng)點擊queryBtn按鈕的時候就調(diào)用動畫顯示
$("#loadgif").show();
然后提交請求
等收到請求后就
$("#loadgif").hide();
效果如下:
以上所述是小編給大家介紹的jQuery Ajax 加載數(shù)據(jù)時異步顯示加載動畫,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jquery實現(xiàn)tab選項卡切換效果(懸停、下方橫線動畫位移)
- jQuery實現(xiàn)鼠標(biāo)經(jīng)過顯示動畫邊框特效
- jQuery實現(xiàn)的背景顏色漸變動畫效果示例
- 淺談原生JS實現(xiàn)jQuery的animate()動畫示例
- 利用原生JS與jQuery實現(xiàn)數(shù)字線性變化的動畫
- 詳解jQuery停止動畫——stop()方法的使用
- jQuery之動畫效果大全
- 原生js實現(xiàn)jquery函數(shù)animate()動畫效果的簡單實例
- jQuery實現(xiàn)圖像旋轉(zhuǎn)動畫效果
- 詳解JQuery基礎(chǔ)動畫操作
相關(guān)文章
jQuery實現(xiàn)立體式數(shù)字動態(tài)增加(animate方法)
本文主要分享了基于jQuery實現(xiàn)立體式數(shù)字動態(tài)增加(animate方法)的實例代碼。有很好的參考價值,需要的朋友一起來看下吧2016-12-12jquery ajax加載數(shù)據(jù)前臺渲染方式 不用for遍歷的方法
今天小編就為大家分享一篇jquery ajax加載數(shù)據(jù)前臺渲染方式 不用for遍歷的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08jQuery ajax 當(dāng)async為false時解決同步操作失敗的問題
這篇文章主要介紹了 jQuery ajax 當(dāng)async為false時解決同步操作失敗的問題的相關(guān)資料,需要的朋友可以參考下2016-11-11