ajax请求封装工具函数（common.js）

最新推荐文章于 2021-08-05 16:47:45 发布

原创最新推荐文章于 2021-08-05 16:47:45 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

工作遇见的问题专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个名为common.js的工具函数库，它对Ajax请求进行了封装，简化了常见的HTTP操作，使得在实际项目中调用Ajax更加便捷高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.common.js工具函数，封装了一些ajax常用操作。调用起来极其方便。

/*********************************全局工具*********************************************/

/**
 * 异步 获取当前系统内数据
 * @param URL controller地址
 * @param PARAM 请求参数
 * @param SUCCESS_ACTION 请求成功后处理事件
 * @param ERROR_ACTION        请求失败后处理事件
 * @param BEFORESEND_ACTION 发送请求前处理事件
 * @param COMPLETE_ACTION   请求结束后处理事件
 * */
function getData(URL,PARAM,SUCCESS_ACTION,BEFORESEND_ACTION,COMPLETE_ACTION,ERROR_ACTION) {
   var params={token:user_session.token,param:PARAM};
   sendJsonRequest(URL,JSON.stringify(params),{
      success:SUCCESS_ACTION,
      before:BEFORESEND_ACTION,
      complete:COMPLETE_ACTION,
      "error":ERROR_ACTION
   });
}

/**
 * 发送json请求
 * */
function sendJsonRequest(URL,PARAM,AJAXPARAM) {
   var ajaxRequestParam = AJAXPARAM;
   if(null == ajaxRequestParam ){
      ajaxRequestParam={};
   }
   ajaxRequestParam.contentType="application/json";
   sendRequest(URL,PARAM,ajaxRequestParam);
};

/**
 * 发送json请求
 * */
function sendRequest(URL,PARAM,AJAXPARAM) {
   
   var SUCCESS_ACTION = AJAXPARAM.success;
   var BEFORESEND_ACTION = AJAXPARAM.before;
   var COMPLETE_ACTION = AJAXPARAM.complete;
   var ERROR_ACTION = AJAXPARAM.error;
   var ASYNC = getNullDef(AJAXPARAM.async,true);
   
   var contentType = 'application/x-www-form-urlencoded';
   
   if(null!=AJAXPARAM.contentType && ''!=AJAXPARAM.contentType){
      contentType=AJAXPARAM.contentType;
   }
   
   $.ajax({
       url:ctx+'/'+URL,
       type:'POST',
       async:ASYNC, 
       data:PARAM,
       contentType: contentType,
       timeout:30000,   
       dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
       beforeSend:function(xhr){
          //执行前
          if(null!=BEFORESEND_ACTION){
             BEFORESEND_ACTION(xhr);
          }
       },
       success:function(data,textStatus,jqXHR){
          //OK
          if(null!=SUCCESS_ACTION){
             try {
                var result=eval("("+data+")");
                SUCCESS_ACTION(result);
             } catch (e) {
                console.log('解析结果失败'+e);
                SUCCESS_ACTION(data);
             }
          }
          
          try {
             if(!(undefined instanceof  setElementAutho))
                setElementAutho();
         } catch (e) {
            console.log('初始 权限失败：'+e);
         }
          
       },
       error:function(xhr,textStatus){
          //判断重定向
          var redirect = xhr.getResponseHeader("REDIRECT");
          var redirectUrl = xhr.getResponseHeader("CONTEXTPATH");
          if (redirect == "REDIRECT") {  
                var win = window;      
                while (win != win.top){    
                    win = win.top;    
                }  
                win.location.href= redirectUrl;
           }else{
              //失败
             if(null!=ERROR_ACTION){
                ERROR_ACTION(xhr,textStatus);
             }
             alertWarning("错误：发送请求失败！");
              console.log('错误')
              console.log(xhr)
              console.log(textStatus)
           }
          
       },
       complete:function(){
          requestComplete();
          
          //请求发送完成
          if(null!=COMPLETE_ACTION){
             COMPLETE_ACTION();
          }
       }
   })
};


//空值转默认值
var getNullDef=function(value,def){
   if(!value || null==value){
      return def;
   }
   return value;
}

//完成请求后
var requestComplete=function(){
   try {
      //stop ladda
       var l = $( '.ladda-button' ).ladda();
       l.ladda('stop');
   } catch (e) {
   }
}

//用于判断请求状态,仅限于 以ResponseMessage 作为返回结果
/**
 * @param {Object} data 请求结果
 * @param {Object} ok   处理结果正确的 后处理函数
 * @param {Object} noOk 处理结果失败的 后处理函数
 */
var stOK=function(data,ok,noOk){
   if( true==data.status && null!=ok){
      ok(data.result);
   }else if( false==data.status && null!=noOk){
      noOk(data.message);
   }
}

//*************************************以上核心函数********************************

//*************************************以下常用提示框********************************
//alert info
var alertInfo=function(msg){
    swal({
       confirmButtonColor: "#1ab394",
       confirmButtonText: "确定",
       title:msg,
       type:"info"
   });
}

//alert warning
var alertWarning=function(msg){
    swal({
       confirmButtonColor: "#1ab394",
       confirmButtonText: "确定",
       title:msg,
       type:"warning"
   });
}

//alert OK
var alertOK=function(msg,success){
    swal({
       confirmButtonColor: "#1ab394",
       confirmButtonText: "确定",
       title:msg,
       type:"success",
       timer: 800
   }, function (isConfirm) {
    if(isConfirm==true && null!=success){
       success();
    }
   });
}
//alert confirm
var alertConfirm=function(msg,confirm){
    swal({
       confirmButtonColor: "#1ab394",
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       showCancelButton: true,
       title:msg,
       type:"warning"
   }, function (isConfirm) {
    if(null!=confirm)
       confirm(isConfirm);
   });
}