重新封装ajax方法-xmsAjax(限制提交频率)

概总

本篇是之前整理的插件,下面的内容就是该插件的一些使用文档,该文档是为了完成公司的业务而写的,反正是我写的,所以这里就直接使用了,算是分享,也算是求指正!

xmsAjax方法使用说明

  1. 基本介绍

    函数命名:xmsAjax

    函数调用:xmsCore.xmsAjax(option);

    库方法调用:$(obj).xmsAjax(option);

    参数:option介绍,请继续向下看。

  2. 基本架构

    该插件是基于jQuery/Zepto实现的,所以在使用时,请确认已经引入了jQuery文件。

    方便起见,也可以在下面的DEMO中,直接查看使用方法。

  3. 传入参数option介绍

    参数option可为字符串或对象

    参数名 默认值 相关说明
    obj(必须) jQuery/Zepto对象 必须,触发该ajax提交的对象的元素,用于处理提交太快的情况。
    url “” ajax提交的地址

    必须存在,可以直接以options.url保存,

    也可以保存在obj.attr(“data-url”)属性中,

    options.url优先
    dataType:可选, “json” 默认为”json”,可以选择”json/html”,返回值的数据格式
    type:可选 “post” 取值”post/get”,默认为”post”,请求的方式。
    success:可选, “” 成功后的回调函数,内部this指向obj,

    传入一个参数,为Ajax的返回值
    error:可选, “” 失败时的回调函数,内部this指向obj,
    传入参数为ajax时error传入的参数,三个值,
    请自行去jQuery的error对象中查看。
    limit:可选, true 取值为true/false,是否需要控制提交间隔,
    默认为true,控制提交间隔
    如果设置为true,并且提交速度过快,那么会提示“您提交的速度太快了,请稍后!”
    这个时间间隔是1s,如果在这段时间内,已经执行了success或者error函数,那么表示前面的处理,已经结束,这个时候,不再受限。
  4. 使用方法–最简单使用方法

    这里说的最简单使用方法,我的意思是,只设置必须的属性,其他的都不设置的。

    使用方法分为两种,分别为xmsCore.xmsAjax(options);$(obj).xmsAjax(options);。他们的具体调用方法如下:

    
    function _success(json){
    	console.log(json);
    }
    var _obj = $("#test"),
        options1 = {
            success:_success
        },
    	options2 = {
    		obj:_obj,
    		success:_success
    	};
    	
    //如果使用jQuery/Zepto方法调用,可以省略obj属性
    //在后面的示例中,都将采用该种调用方式。
    _obj.xmsAjax(options1);
    
    //如果使用xmsCore方法,就必须有obj属性
    xmsCore.xmsAjax(options2);
    
    
    

    在前面示例的两个使用方法中,都没有url属性,因为url属性,可以取自_obj.attr(“data-url”)属性中,取自data-url属性的写法,以后会主要使用。这样可以尽量的把前后台分开,在JS尽量少的出现需要后台操作的东西。

    示例:最简单使用方法的DEMO

    在该示例中,如果您提交速度过快的话,会提示您“您提交的速度太快了”,这个限制时间为一秒钟。

  5. 使用方法–设置额外的参数data属性

    有时候,提交ajax时,是需要携带一些额外的数据的,这个时候,就需要使用该方法的data属性了,该属性的属性值,支持两种写法,分别为对象和字符串(key=value&key1=value1)。

    
    function _success(json){
    	console.log(json);
    }
    var _obj = $("#test"),
    	options = {
    		success:_success,
    		data:"key1=value1&key2=value2"
    	};
    	
    _obj.xmsAjax(options);
    
    
    

    示例:设置额外的参数data属性的DEMO

  6. 使用方法–不限制提交频率limit

    在大多数时候,提交频率是被限制的,所以xmsAjax的方法,默认是限制提交频率的,但同时,也会有些时候,是不需要限制提交频率的,那么xmsAjax也要支持这种情况,这个时候,请设置limit:false

    
    function _success(json){
    	console.log(json);
    }
    var _obj = $("#test"),
    	options = {
    		success:_success,
    		limit:false
    	};
    	
    _obj.xmsAjax(options);
    
    

    示例:不限制提交频率的DEMO

  7. 使用方法–特殊的error属性

    之所以说,是特殊的,是因为这里的写法和过去的插件是有区别的,这里当调用$.ajax失败时的处理,分为两种情况,如果在调用xmsAjax传入的参数中有error属性,那么$.ajax失败时,就执行自定义的这个error回调,如果没有传入error,那么就使用默认的错误提示,这里的默认的提示为“由于网络的原因,您刚才的操作没有成功。”。

    
    function _error(){
    	alert("error");
    }
    
    var _obj = $("#test"),
    	options = {
    		error:_error
    	};
    	
    _obj.xmsAjax(options);
    
    
    

    示例:调用方法的DEMO

本文地址:http://www.zhangyunling.com/?p=468

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

重新封装ajax方法-xmsAjax(限制提交频率)》有2个想法

    1. 我没有太明白,您的意思是什么?