XGoAjax,统一风格处理项目中的ajax请求

前端之家收集整理的这篇文章主要介绍了XGoAjax,统一风格处理项目中的ajax请求前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

XGoAjax简介

统一对ajax请求的结果进行处理,包括消息提示错误处理等操作,这样可以保证我们的项目有一个统一的风格,同时也简化了大量的代码
项目地址:https://github.com/xucongli1989/XGoAjax
下载地址:https://github.com/xucongli1989/XGoAjax/releases

属性

插件选项:

属性 默认值 说明
id 发起请求的标识,可以随意指定,主要是便于判断该请求为同一类型的操作
templateName “default” 指定结果消息处理所使用的模板
templateOption {} 模板自定义选项,详细请参考【模板选项】
mode “exclusive” 请求模式,exclusive:独占请求,要想再发起同样的一个请求,必须等待上次请求结束。;greedy:贪婪请求,不限制重复请求
ajax [] $.ajax选项,数组的每一项代表一个ajax请求,可以有多个ajax请求。默认值请参考【ajax默认选项】

模板选项:

属性 默认值 说明
name 模板名
before function (ops) 请求前,如果返回false,则阻止后续执行。
ops:当前插件选项
error function (ops) 失败后执行函数
ops:当前插件选项
success function(ops,datas) 成功后执行,datas为数组。
ops:当前插件选项
datas:请求返回的数据
complete function (ops) 完成后执行
ops:当前插件选项
templateOption {} 模板自定义选项

ajax默认选项:

属性 默认值 说明
url 如果没有指定,则为第一个form的action,如果还没有指定,则为location.href ajax请求路径
dataType “JSON” 数据格式
type “get” 请求方式
data null 发送的数据

方法

方法 说明
$.XGoAjax.addTemplate(model) 给该插件添加一个新的模板,model请参考【模板选项】
$.XGoAjax.getAjaxList() 获取当前正在处理的ajax列表

基本使用示例

  • 每次单击发出一个ajax请求(当前必须只有一个请求,独占模式)

    $.XGoAjax({
        id: "btnSave1",ajax: [{
            url: "data.aspx"
        }]
    });
  • 每次单击发出一个ajax请求(可以发出多个请求,贪婪模式)

    $.XGoAjax({
        id: "btnSave2",mode: "greedy",ajax: [{
            url: "data.aspx"
        }]
    });
  • 每次单击发出多个ajax请求(当前必须只有一组请求,独占模式)

    $.XGoAjax({
        id: "btnSave3",ajax: [{
            type: "get",url: "data.aspx"
        },{
            type: "post",url: "data.aspx"
        }]
    });
  • 每次单击发出多个ajax请求(可以发出多组请求,贪婪模式)

    $.XGoAjax({
        id: "btnSave4",url: "data.aspx"
        }]
    });

猜你在找的Ajax相关文章