1. 程式人生 > >mui開發APP教程之mui.ajax請求後出現“載入中”

mui開發APP教程之mui.ajax請求後出現“載入中”

利用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('伺服器連線超時,請稍後再試’); } } });