登录 
欢迎来到陈冬冬(雪地里走)的学习天地 | 经验分享整理平台 | 陈冬冬
 服务器本次启动于:8天前 

MUI的ajax包装

2017-09-07 21:48:41 阅读:()

ajax的使用比较简单,以至于所有的请求提交都可能会使用到,但是它的参数中dataType、type属性等基本都是固定的;除了这些属性外一个请求的提交往往都附有等待中的响应效果,如果每个请求都这么写也太业余了;另外对一些后台响应的处理肯定也得有一个全局的包装,比如用户提交一个请求,后台响应未登录或者没有权限*作等,这些完全可以由公共处理拦截,而无需进入ajax的success中处理......

本文主要包装一下mui的ajax请求,下面说一下包装一下的特征:

1、不改变mui.ajax函数的实现,调用方式、参数等保持一致,调用简单;

2、dataType、type等属性默认为最常用的值,如需替换可覆盖;

3、添加平台自带的loading效果,如不需要可采用属性覆盖的方式取消;

4、全局处理部分*作的响应,如用户未登录、没有权限、出现错误等(需与后端集成);

5、回调函数等覆盖默认实现,如success,error等;

如果你对jQuery的ajax比较熟悉,其实这里的实现就看起来比较简单,参考代码如下:

代码封装为mui.ajaxRequest

/**

 * mui.ajaxRequest

 * 封装mui.ajax请求,调用方式与一致

 */

(function($, doc) {

   mui.extend({

       ajaxRequest: function(url , options){

           var defaults = commonDefaules(options);

           var options = mui.extend(defaults, options);

           options.beforeSend = defaults.onBeforeSend;

           options.success = defaults.onSuccess;

           options.error = defaults.onError;

           mui.ajax(url , options);

      } 

   })

  

   function commonDefaules(options){

      //默认参数定义

      var defaults = {

        dataType: "json",

        type: "post",

        timeout: 10000,

        wait: true,

        waitMessage: "努力奔跑中,等等我...",

        onBeforeSend : function(xhr){

           if(defaults.wait == true){

              showLoading(defaults.waitMessage);

       }

           if(options.beforeSend){

             options.beforeSend(xhr);

           }

        },

        onSuccess : function(data){

           if(defaults.wait == true){

              hideLoading();

           }

           //后台抛出Exception异常的情况

           if(data && data.exceptionType && (data.exceptionType.indexOf("class com.frame.modules.base.exceptions.") != -1)){

              plus.nativeUI.alert(data.message , function(){} , "提示:" , "取消");

              return;

           }

          

           if(data && data.result && (data.result === "input")){

              plus.nativeUI.alert(data.message , function(){} , "提示:" , "取消");

              return;

           }

           if(options.success){

              options.success(data);

            }

        },

        onError : function(a , b , c){

           hideLoading();

           if(options.error){

              options.error(a , b , c);

         }

        }

      };

      return defaults;

   }

  

   function showLoading(msg){

     plus.nativeUI.showWaiting(msg , {

           /*round: "1px", //圆角*/

         style: "white",

           back:"none",//不响应返回按钮事件

           background: "#66CDAA",

           /*background:"rgba(110,120,50,1)",*/

        loading:{

           display:"inline" ,

           icon:"/images/waiting.png"

        }

      });

   }

  

   function hideLoading(){

      plus.nativeUI.closeWaiting();

  }

}(mui, document));

调用方式为

mui.ajaxRequest(url , {

    data: {},

    success: function(data){

   },

    error: function(a, b, c){

   }

});

其中data为参数传递对象,如果此处有beforeSend、success、error等会在系统异常筛选范围外调用success、error实现,打到包装请求处理的目的。

东西比较简单,随便写写,也可参考另一篇文章《我理解的jquery.ajax请求的loading处理方式,本站也有此文,同步的。


你可能感兴趣的:
      关键字:options(15)data(13)function(12)mui(11)defaults(10)
      互动()
      评论()
      比起点赞,站长更喜欢登录后的评论
      • 0
      • 0
      • 0
      • 0
      • 0