简化$.ajax的插件jquery.sdajax的使用说明

超、凢脫俗 2021-09-12 02:52 380阅读 0赞

# 前言 #

jQuery.ajax是jQuery使用得最频繁的方法之一，笔者在使用的过程，使用的参数基本上固定，因此往往会有很多冗余的代码产生。慢慢笔者开始厌倦了原始的写法，想精简一套简单的出来。虽然jQuery里有jQuery.post、jQuery.get、jQuery.getJSON的精简的方法，但是无法满足要求。同时，由于笔者做后台做得比较多，因此使用$.ajax时，都会使用遮罩层，请求结束时，关闭遮罩层。随着功能的不断累加，就生成下面用于ajax请求的插件。遮罩层采用[Layer][]实现（一款非常不错的弹出层插件，[官方文档][Link 1]）

# 插件代码 #

/*!*********************************************
     * Copyright (C) Corporation. All rights reserved.
     *
     * Author      :  lihaitao
     * Email        : lhtzbj12@126.com
     * Create Date  : 2017-01-22
     * Description  : 自定义的简化ajax请求扩展,依赖layer插件(一款非常优秀的弹出层插件),默认datatype='json',async=true
     * Version      : V1.0.2
     *
     * Revision History:
     *      Date         Author               Description
     *      2017-09-22   lihaitao               将async默认值改成true,同步下load出不来
     *      2017-01-22   lihaitao               将async默认值改成false
     *      2017-01-17   lihaitao               create
     *
    ***********************************************
    调用示例
    $.sdpost('/home/index', {
       'name':'lht'});
    $.sdpost('/home/index', {
       'name':'lht'}, function (re) {
        alert(re.code);
    },false,'json');
    //传入参数
    参数1：请求的地址
    参数2：提交的值
    参数3：成功时的回调函数
    参数4：async的值，默认true
    参数5：dataType同ajax里的dataType,默认'josn'
    */
    (function ($) {
        $.extend({
            sdpost: function (url, data, success, async, dataType) {
                if (typeof (data) === 'undefined' || data === null) data = {};
                if (typeof (async) === 'undefined' || async === null) async = true;
                if (typeof (dataType) === 'undefined' || dataType === null) dataType = 'json';
                $.ajax({
                    url: url,
                    data: data,
                    type: 'post',
                    async: async,
                    dataType: dataType,
                    beforeSend: function (XHR) {
                        parent.layer.load();
                    },
                    complete: function (XHR, TS) {
                        parent.layer.closeAll('loading');
                    },
                    success: function (data) {
                        if (success) {
                            success(data);
                        }
                    },
                    error: function (XHR, msg, e) {
                        if (typeof (XHR.responseText) !== 'undefined') {
                            if (XHR.responseText.indexOf('HttpRequestValidationException') > -1) {
                                parent.layer.alert("请求失败：" + '您输入的内容里有潜在危险的字符，例如：“&#” 等', { icon: 2, title: '错误' });
                            } else {
                                parent.layer.alert("请求失败：" + XHR.responseText, { icon: 2, title: '错误' });
                            }
                        }
                        else {
                            parent.layer.alert("请求失败", { icon: 2, title: '错误' });
                        }
                    }
                });
            },
            sdget: function (url, data, success, async, dataType) {
                if (typeof (data) === 'undefined') data = {};
                if (typeof (async) === 'undefined' || async === null) async = true;
                if (typeof (dataType) === 'undefined' || dataType === null) dataType = 'json';
                $.ajax({
                    url: url,
                    data: data,
                    type: 'get',
                    async: async,
                    dataType: dataType,
                    beforeSend: function (XHR) {
                        parent.layer.load();
                    },
                    complete: function (XHR, TS) {
                        parent.layer.closeAll('loading');
                    },
                    success: function (data) {
                        if (success) {
                            success(data);
                        }
                    },
                    error: function (XHR, msg, e) {
                        if (typeof (XHR.responseText) !== 'undefined') {
                            if (XHR.responseText.indexOf('HttpRequestValidationException') > -1) {
                                parent.layer.alert("请求失败：" + '您输入的内容里有潜在危险的字符，例如：“&#” 等', { icon: 2, title: '错误' });
                            } else {
                                parent.layer.alert("请求失败：" + XHR.responseText, { icon: 2, title: '错误' });
                            }
                        }
                        else {
                            parent.layer.alert("请求失败", { icon: 2, title: '错误' });
                        }
                    }
                });
            }
        });
    })(jQuery);

# 传入的参数 #

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>默认值</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>参数1</td> 
   <td></td> 
   <td>请求的地址</td> 
  </tr> 
  <tr> 
   <td>参数2</td> 
   <td></td> 
   <td>提交的值</td> 
  </tr> 
  <tr> 
   <td>参数3</td> 
   <td></td> 
   <td>成功时的回调函数</td> 
  </tr> 
  <tr> 
   <td>参数4</td> 
   <td>true</td> 
   <td>async的值</td> 
  </tr> 
  <tr> 
   <td>参数5</td> 
   <td>json</td> 
   <td>dataType同ajax里的dataType</td> 
  </tr> 
 </tbody> 
</table>

# 调用示例 #

$.sdpost(‘/user/list’,{
       'orgid':1}, function (re) { 
         if (re.code == 1) {
              //处理回返的数据 
         }
         else {
                  //弹出错误提示
         }
    });

只要简单的一句话就将发出请求的显示遮罩层、发出请求、请求成功后回调、请求失败时弹出错误显示、请求结束关闭遮罩层等功能都实现了，使用起来特别方便。

[Layer]: http://layer.layui.com/
[Link 1]: http://www.layui.com/doc/modules/layer.html