#### 引入ajax模塊
如果你自定義一個新的js頁面需要使用ajax模塊,則需要先引入,如果用模板原有的,此步可跳過
~~~javascript
layui.define(['jquery', 'layer', 'ajax'], function(exports) {
jqMain = function() {};
var main = new jqMain();
main.init();
exports('main', {});
});
~~~
#### 給selected添加異步事件
這里按鈕需要兩個參數:ajax,data-params
~~~html
<select name="city" lay-verify="required" lay-filter="ajax" data-params='{"url": "/php/test.php","data":"id=1&name=ni&va=23","confirm":"true"}'>
<option value="0">請選擇分類</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
~~~
**lay-filter:**此處必須是ajax,后臺封裝的名稱就是這個
**data-params:**這里有默認的參數,也可以添加自己的參數,用于后臺獲取,默認參數如表:
本處提交的參數"data":"id=1&name=ni&va=23"也會提交到服務端,**而select的選中值也會拼在參數后面提交,如選中了上傳,則實際傳送的參數為"data":"id=1&name=ni&va=23&city=021",這里的city就是select的name值,021就是選中上海的值**
| 參數 | 默認值 | 說明 |
| -------- | ----- | ---------------------------------------- |
| 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:**當前操作的元素對象