Ajax 模块
Ajax 模块是主要用于实现ajax提交的YeeUI模块。
主要支持的 HTML 元素为 a form button 和具有onchange事件的 :input (主要为 text password textarea 等) 如果是 :input 标签则当发生 onchange 时将触发提交ajax请求。
属性表:
属性名称: | 类型 | 其他方式实现,或者约束 | 说明 |
data-url |
String | 在 a 标签可以是 href , 在 from 表单中可以是 action |
ajax 请求的地址信息。 |
data-method | String GET|POST |
在 form 表单中 可以是 method 属性 |
ajax请求的方式。 |
data-recover | true|false | 只能在 :input 中使用。 | 如果为真,即输入框值为空时,不提交,并使用原来的值填充输入框。 |
data-carry |
String |
输入框的 name 多个用,分开 | 携带参数提交,如果填写 如 id,name 将从页面上提取对应的输入框或者url 参数加入到本次提交中。 |
data-back-url | String | 链接地址 | 如果返回值成功,即json数据中 status=true 时,跳转到指定页面。 |
data-timeout | int | 单位毫秒 | 如果为0 不使用遮罩,如果有值使用遮罩,如果页面返回成功或者失败,则关闭遮罩,否则超时后也会关闭遮罩。 |
data-alert | true|false | 如果页面返回成功或者失败,使用对话框弹窗错误提示,而不使用3秒消息的通知框(默认是通知对话框) |
事件:
on-before
提交Ajax请求前的事件,事件会传入一个 data 数据,即提交前的参数数据。
如果返回 false 会阻止Ajax请求。
<script>
$('#id').on('before',function(ev,data){
return false;
});
// 根据jQ 的数据格式,event 参数是必须存在的,所以从第2个参数起 data 是我们的YeeUI事件参数。
</script>
在 html 标签上的写法
<a href="mybook.json" yee-module="ajax" on-before="console.log(data);" >提交</a>
<form action='mybook.json' yee-module="ajax" on-before="console.log(data);"></form>
on-success
提交返回成功的事件,事件会传入一个 ret 数据,即服务器返回的json格式数据。
如果返回 false 会阻止Ajax请求对success 事件的默认处理行为。
返回数据格式约定:
{
"status":true|false //必须,即成功或者失败
"msg":"服务器返回的消息内容,用于提示" //必须
"alert":true|false //可选的,即服务器期待以对话框形式弹窗提示消息
"back":"服务器指定跳转的URL" //可选,仅成功情况下,服务器返回指定要跳转的页面
}
即如果 服务器返回 status = true 时,会触发 on-success 事件。
<script>
$('#id').on('success',function(ev,ret){
console.log(ret);
return false;
});
// 根据jQ 的数据格式,event 参数是必须存在的,所以从第2个参数起 ret 是我们的YeeUI事件参数。
</script>
在 html 标签上的写法
<a href="mybook.json" yee-module="ajax" on-success="console.log(ret);" >提交</a>
<form action='mybook.json' yee-module="ajax" on-success="console.log(ret);"></form>
on-fail
提交返回失败的事件,事件会传入一个 ret 数据,即服务器返回的json格式数据。
如果返回 false 会阻止Ajax请求对 fail 事件的默认处理行为。
返回数据格式参考 on-success
使用示例:
<script>
$('#id').on('fail',function(ev,ret){
console.log(ret);
return false;
});
// 根据jQ 的数据格式,event 参数是必须存在的,所以从第2个参数起 ret 是我们的YeeUI事件参数。
</script>
在 html 标签上的写法
<a href="mybook.json" yee-module="ajax" on-fail="console.log(ret);" >提交</a>
<form action='mybook.json' yee-module="ajax" on-fail="console.log(ret);"></form>
on-back
提交后不管是成功还是失败都会触发,事件会传入一个 ret 数据,即服务器返回的json格式数据。
如果返回 false 会阻止Ajax请求对 success 和 fail 事件的默认处理行为。
返回数据格式参考 on-success
参考示例:
<script>
$('#id').on('back',function(ev,ret){
console.log(ret);
return false;
});
// 根据jQ 的数据格式,event 参数是必须存在的,所以从第2个参数起 ret 是我们的YeeUI事件参数。
</script>
在 html 标签上的写法
<a href="mybook.json" yee-module="ajax" on-back="console.log(ret);" >提交</a>
<form action='mybook.json' yee-module="ajax" on-back="console.log(ret);"></form>
同时 ajax 可以配合 确认模块 confirm 或者 在表单情况下 配合验证模块 validate 使用。
如:
<a href="mybook.json" yee-module="ajax confrim" data-confrim="确定要提交了吗?" on-back="console.log(ret);" >提交</a>
<form action='mybook.json' yee-module="ajax validate" data-mode=1 on-back="console.log(ret);"></form>