mui開發APP教程之mui.ajax請求後出現“載入中”
阿新 • • 發佈:2019-01-23
利用mui.ajax向伺服器請求資料會出現請求超時的情況,一般若是10S之後還沒有響應,就會定義為超時,那麼出錯了的時候,這10秒鐘不可能給使用者白屏,即便是請求成功之後開啟一個新頁面,那麼這個間隔時間也給使用者響應。
但是mui 的ajax並沒有實現類似jquery的ajaxStart 和 ajaxStop方法,然而在移動端上這兩個方法還是比較常用的,比如在向後臺提交資料的時候顯示loading的圖示,防止使用者的第二次提交,並在資料提交完成時取消loading動畫,現在,mui提供了兩個類似方法,但是文件中並沒有提到(mui),並且HBuilder生成的程式碼塊也並沒有這兩個方法。真是需要好好完善。
好在,mui提供了beforeSend和complete這兩個方法,功能類似於jquery的ajaxStart 和 ajaxStop方法,所以大家現在可以使用。
var mask=mui.createMask();//遮罩層
mui(documengt.body).on('tap','#login',function(){
mui.ajax('http://127.0.0.1/login',{
data:{
userName:userName,
userPwd:userPwd
},
dataType: 'json', //伺服器返回json格式資料
type: 'post', //HTTP請求型別
timeout: 10000, //超時時間設定為10秒;
beforeSend: function() {
plus.nativeUI.showWaiting(title, options);
mask,show();//顯示遮罩層
},
complete: function() {
plus.nativeUI.closeWaiting();
mask.closed();//關閉遮罩層
},
success: function(data) {
//伺服器返回響應,根據響應結果,分析是否登入成功;
if(data=='1'){
mui.alert('登入成功');
}
},
error: function(xhr, type, errorThrown) {
mui.alert('伺服器連線超時,請稍後再試’);
}
}
});