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请求的代码
// 😘
}
});