#### 引入ajax模块
如果你自定义一个新的js页面需要使用ajax模块,则需要先引入,如果用模板原有的,此步可跳过
~~~javascript
layui.define(['jquery', 'layer', 'ajax'], function(exports) {
jqMain = function() {};
var main = new jqMain();
main.init();
exports('main', {});
});
~~~
#### 给text添加异步事件
这里按钮需要两个参数:ajax,data-params
~~~html
<input type="text" class="layui-input ajax-blur" name="order" value="{{ item.id}}" data-list='{"key":"id={{ item.id}}","filed":"order","render":"true","action":"edit"}' data-params='{"url":"/php/test.php","data":"id=1&name=paco","loading":"false"}'>
~~~
**lay-filter:**此处必须是ajax,后台封装的名称就是这个
**data-list:**此参数为更新后自动刷新列表,key:为数据列表的主键值(如id=1,也有可能member_id=1),filed:为编辑的字段,render:是否重新渲染列表,action为本次的操作方式,可以是edit,del,del时可以不写filed
**data-params:**这里有默认的参数,也可以添加自己的参数,用于后台获取,默认参数如表:
本处提交的参数"data":"id=1&name=paco"也会提交到服务端,**传送的参数为"data":"id=1&name=paco&order=1",order为text的name值,1为text的value值,当然text里的value值没有变化,是不会触发异步操作的**
| 参数 | 默认值 | 说明 |
| -------- | ----- | ---------------------------------------- |
| method | post | 提交的方法 |
| data | | 提交到服务端的数据,格式为id=1&name=jqcool |
| dataType | json | 服务器返回数据类型 |
| complete | | 服务器返回数据后调用的自定义方法(注意影响的域,建议全局)name=jqcool&complete=test |
| url | | 请求的服务端地址 |
| loading | true | 是否启用loading图片 |
| close | false | 是否关闭回调函数|
比如说我要用post请求,传递参数id=1,name=jqcool,服务端地址为:delall.php,不使用loading动画,代码如下:
~~~html
data-params='{"url": "delall.php","data":"id=1&name=jqcool","loading":"false"}'
~~~
这里要注意参数的单引号与双引号,不能返了,要不会报错。
提交到服务端处理完成后,服务端需返回以下json数据格式
~~~php
$data['status'] = 200;
$data['msg'] ="更新成功";
$data['url'] = "";
echo header("content-type:text/html; charset=utf-8");
echo json_encode($data);
~~~
| 参数 | 必填 | 说明 |
| ------ | ---- | ----------------------------------- |
| msg | 否 | 返回的提示信息 |
| url | 否 | 1、空或不定义时不操作 2、地址时跳转到该地址 3、reload时刷新页面 |
| status | 是 | 状态,成功时为200,其它均为错误 |
上面返回代码是弹出提示更新成功,页面不做任何操作。
如果想刷新页面呢,把url设成reload即可,代码如下
~~~php
$data['status'] = 200;
$data['msg'] ="更新成功";
$data['url'] = "reload";
echo header("content-type:text/html; charset=utf-8");
echo json_encode($data);
~~~
###### 跳转到地址
~~~php
$data['status'] = 200;
$data['msg'] ="更新成功";
$data['url'] = "jqadmin.jqcool.net";
echo header("content-type:text/html; charset=utf-8");
echo json_encode($data);
~~~
##### 自定义返回方法
如果上面三种情况都不通满足需求,那肿么办呢?定义complete方法,
1、首先在data-params的参数里添加complete参数,如我需要返回时调用test()方法,那代码如下
~~~html
data-params='{"url": "delall.php","data":"id=1&name=jqcool","confirm":"true","loading":"false","complete":"test"}'
~~~
2、在当前模块定义一个ajax模块的方法便可调用了,代码如下
~~~javascript
var ajax = layui.ajax;
ajax.test = function(ret, options, that) {
alert("这是ajax回调方法");
}
~~~
**ret:**后端返回的json数据
**options:**请求的配置参数
** that:**当前操作的元素对象