dom_request

在DOM元素身上绑定属性,使其发送指定请求需要JQ和layer

Usage no npm install needed!

<script type="module">
  import domRequest from 'https://cdn.skypack.dev/dom_request';
</script>

README

简化请求操作

 在DOM元素身上使用指定属性使其能快速发起请求

.c-ajax:类名中c-ajax表示

2019年6月28日更新:
制为layui模块,使用layui.use进行引入。
大多方法使用原生js实现绑定,ajax请求可进行重写

layui.use('dom_request', dr => {
     dr.config.event = "click";    // 在元素没有cc-event属性的时候,默认此事件
     dr.config.method = "GET";     // 在cc-method为空时默认请求方式
     dr.config.status = "err";
     // 后端返回状态码的标识,如果为0则回调cc-fn-success,否则cc-fn-error,不论怎样都会调用cc-fn-complete,参数都是相同的.
});

属性说明(敲黑板注意了,全都是属性)

 以下属性除了 cc-param-*,其他最远可以写在自身的父级的父级处共享
 您需要注意下cc-url是有点复杂的

c-ajax

 dom_request标识,具有此属性的元素会被视为发起请求源

cc-event

 触发请求的事件名称,默认值为 config.event = "click" 单击后触发,
 您大可以 cc-event="dblclick" 双击发起请求

cc-url

 请求的目标,可以使用自身url拼接父节点url。

如果在如下代码中

<ul cc-url-add="/a" cc-url-upd="/u" cc-url-del="/d">
     <li c-ajax cc-url="add">1</li> <!-- 请求/a -->
     <li c-ajax cc-url="upd">2</li> <!-- 请求/u -->
     <li c-ajax cc-url="del">3</li> <!-- 请求/d -->
     <li c-ajax cc-url="/edit">3</li>
     <!-- 请求/edit, 因为它的父节点没有cc-url-edit -->
</ul>

cc-method

 请求方式,默认是 config.method = "GET" 方式

cc-param-*

 用于请求携带的参数, 如 cc-param-code="1434389213"会携带一个code为1434389213的参数发送请求
 可以有多个参数

cc-confirm

 用于在发从请求之前的二次确认,如 cc-confirm="您确认这样做吗?"
 在操作前,会弹窗提示用户是否确认,用户按下【确定】按钮后才会继续之后的操作,否则不会发起请求

cc-fn-before

 在执行所有操作之前,这个回调会被调用,如果这个方法返回了 false ,那么后面的操作也会停下来
 如 c-fn-before="be" c-confirm="确认?"
 会先调用be(dom)方法,如果这个方法没有返回 false会弹出提示框提示用户是否确认,等待用户点击确认后开始调用模块内的ajax方法

cc-fn-success

 判断接口中的 config.status = "err" 是否为 0 如果为0则以这个属性的值作为回调方法

cc-fn-error

 判断接口中的 config.status = "err" 是否不为 0 如果不为0则以这个属性的值作为回调方法

cc-fn-complete

 不论如何,请求完毕后都会回调它
 不论后端返回的是json还是text

cc-hint

 默认情况下,受到响应后都会有操作的提示。
 使用这个属性来禁用提示

方法重写

 默认使用的是jQuery的方法,虽然不大可能用到但是可以根据情况重写
layui.use('dom_request', dr => {
     dr.ajax = (
          url,      // 目标url
          method,   // 请求方式,使用默认配置
          data,     // 组合后的cc-param-* 作为对象参数
          success,  // 接口返回成功的回调
          error,    // 接口返回失败的回调
          complete, // 请求完成的回调
          dom,      // 触发事件的DOM元素
          hint      // cc-hint属性,用于隐藏提示
     ) => {
          // 实现ajax请求的代码
          // 😘
     }
});