jquery ajax請求方式與提示用戶正在處理請稍等

更新時(shí)間：2014年09月01日 16:10:20 投稿：whsnow

為了提高用戶體驗(yàn)度，我們通常會(huì)給出 “正在處理，請稍等！”諸如此類的提示。我們可通過設(shè)置$.ajax()下的參數(shù)beforeSend()來實(shí)現(xiàn)

初次使用$.ajax() ,我沒有去區(qū)分過ajax的異步請求和同步請求的不同，剛開始使用同步請求，以至后來出現(xiàn)許多問題，特別在體驗(yàn)度方面。
異步和同步：
同步意味著執(zhí)行完一段程序才能執(zhí)行下一段，它屬于阻塞模式，其表現(xiàn)在網(wǎng)頁上的現(xiàn)象是——瀏覽器會(huì)鎖定頁面（即所謂的頁面假死狀態(tài)），用戶不能操作其它的，必須等待當(dāng)前請求返回?cái)?shù)據(jù)。而使用異步方式請求，頁面不會(huì)出現(xiàn)假死現(xiàn)象。
提升用戶體驗(yàn)度：
當(dāng)用戶提交數(shù)據(jù)等待頁面返回結(jié)果是需要時(shí)間的，有時(shí)這段等待時(shí)間比較長，為了提高用戶體驗(yàn)度，我們通常會(huì)給出 “正在處理，請稍等！”諸如此類的提示。我們可通過設(shè)置$.ajax()下的參數(shù)beforeSend()來實(shí)現(xiàn)，
eg:
html關(guān)鍵代碼

<div id="warning"></div>

js文件中的關(guān)鍵代碼

$.ajax(function(){
.
.
.
//省略了一些參數(shù)，這里只給出async 和 beforeSend
async: false, //同步請求，默認(rèn)情況下是異步（true）
beforeSend: function(){
$('#warning').text('正在處理，請稍等！');
}
});

注意，如果你按照同步設(shè)置 async: false, $('#warning').text('正在處理，請稍等！');在網(wǎng)頁中根本沒有出現(xiàn)效果，如果將$('#warning').text('正在處理，請稍等！');換成 alert（‘test'）；在發(fā)送請求前會(huì)立即看到彈出框，這說明 beforeSend:是執(zhí)行了，但是換成別的諸如 $('#warning').text('正在處理，請稍等！'); 在請求發(fā)出返回結(jié)果了都沒有看到提示出現(xiàn)。關(guān)于這個(gè)問題，我是納悶了很久，問題到底是什么我還是不清楚。
把同步請求改成異步請求，上面的問題就沒有了，

beforeSend: function(){
$('#warning').text('正在處理，請稍等！');
}

會(huì)立即被執(zhí)行。

您可能感興趣的文章:

相關(guān)文章

jquery網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn)
本篇文章主要介紹了jquery網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn) ，在頁面加載的時(shí)候，上方紅色的進(jìn)度條，有興趣的可以了解一下
2017-06-06
jQuery切換網(wǎng)頁皮膚并保存到Cookie示例代碼
這篇文章主要介紹通過jQuery切換網(wǎng)頁皮膚并將狀態(tài)保存到Cookie的相關(guān)代碼,需要的朋友可以參考下
2014-06-06
jQuery實(shí)現(xiàn)右側(cè)顯示可向左滑動(dòng)展示的深色QQ客服效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)右側(cè)顯示可向左滑動(dòng)展示的深色QQ客服效果代碼,涉及jQuery控制頁面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
Jquery Validation插件防止重復(fù)提交表單的解決方法
在項(xiàng)目開發(fā)中，測試人員報(bào)告缺陷說，即時(shí)有表單驗(yàn)證，但是如果快速點(diǎn)擊兩下“提交”按鈕，系統(tǒng)會(huì)產(chǎn)生兩條相同的記錄。
2010-03-03
jQuery基于muipicker實(shí)現(xiàn)仿ios時(shí)間選擇
本文給大家分享的是把jQuery的muipicker插件修改實(shí)現(xiàn)仿IOS時(shí)間選擇特效，非常的不錯(cuò)，有需要的小伙伴可以參考下。
2016-02-02
jQuery遍歷節(jié)點(diǎn)樹方法分析
這篇文章主要介紹了jQuery遍歷節(jié)點(diǎn)樹方法,結(jié)合實(shí)例形式分析了3種常見的節(jié)點(diǎn)遍歷技巧,需要的朋友可以參考下
2016-09-09
jQuery對象和DOM對象使用說明
jQuery對象和DOM對象使用說明，需要的朋友可以參考下。
2010-06-06
jQuery中ajax的使用與緩存問題的解決方法
本篇文章主要介紹了jQuery中ajax的使用與緩存問題的解決方法。需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jQuery插件開發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼
最近項(xiàng)目開發(fā)中遇到這樣的功能:1.點(diǎn)擊按鈕的時(shí)候，可以進(jìn)行倒計(jì)時(shí)，倒計(jì)時(shí)自定義.2.當(dāng)接收短信失敗后，倒計(jì)時(shí)停止，可點(diǎn)擊重新發(fā)送短信.3.點(diǎn)擊的元素支持一般標(biāo)簽和input標(biāo)簽。看似很復(fù)雜其實(shí)實(shí)現(xiàn)代碼很簡單，下面小編給大家分享下實(shí)現(xiàn)代碼，需要的朋友參考下吧
2017-05-05
jQuery插件PageSlide實(shí)現(xiàn)左右側(cè)欄導(dǎo)航菜單
jQuery pageSlide 是一個(gè)可以讓網(wǎng)頁出現(xiàn)滾動(dòng)效果的jQuery插件，它可以控制一個(gè)隱藏頁面的顯示和關(guān)閉。具體來說，就是當(dāng)前頁占一個(gè)完整頁面，隱藏頁是看不到的，你設(shè)置一個(gè)控制的地方，點(diǎn)擊該控制時(shí)觸發(fā)事件，隱藏的頁面就滑出來，再次點(diǎn)擊隱藏頁面以外的地方，它就又關(guān)閉
2015-04-04