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>



 

上一篇:YeeUI 配置说明
Copyright © 2021 海南的叶子 All Rights Reserved 琼ICP备2021000725号

琼公网安备 46900702000037号