1、Ajax回調函數
自定義函數參數為:callback,通過DOM附加:data-callback="自定義函數名稱",自定義函數名稱不帶括号以及參數
自定義回調示例:
JSON參數:
名稱
類型
描述
statusCode
int
必選。狀态碼(ok=200,error=300,timeout=301),可以在bjui.init時配置三個參數的預設值
message
string
可選 資訊内容
tabid
可選 待重新整理的navtab id,多個id以英文逗号分隔開,目前的navtab id不需要填寫,填寫後可能會導緻目前navtab重複重新整理
dialogid
可選 待重新整理的dialog id,多個id以英文逗号分隔開,請不要填寫目前的dialog id,要控制重新整理目前的dialog,請設定dialog中表單的reload參數
divid
可選 等待重新整理div id,多個id以英文逗号分隔開,請不要填寫目前的div id,要控制重新整理目前div,請設定該div中表單的reload參數
closeCurrent
boolean
可選 是否關閉目前視窗(navtab或dialog)
forward
可選。跳轉到某個url
可選。跳轉url前的确認提示資訊
2、送出表單
初始化
Data屬性:form添加屬性data-toggle="validate"或data-toggle=“ajaxform”。其中data-toggle=“validate”屬性需要通過驗證後才能送出。
例子:
jqueryAPI:API方式目前不支援驗證送出
$(form).bjuiajax('form',options)
參數(options)
預設值
confirmMSG
null
【可選】送出表單錢的确認資訊
callback
function(json)
【可選】預設由内置回調函數處理,參數json由服務端傳回
loadingmask
true
【可選】ajax請求時是否顯示資料加載遮罩
reload
【預設回調函數使用】 表單送出成功後,是否重新整理目前視窗
reloadNavtab
false
【預設回調函數使用】(僅限dialog及局部重新整理)表單送出成功後,是否重新整理目前navtab
注意:form如果有屬性enctype="multipart/form-data",支援HTML5的浏覽器以FormData方式送出資料,不支援的則由iframe送出
3、ajax搜尋表單
Ajax搜尋表單?指的是什麼?
說實話,我有點迷糊。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5iMmhzM0gTOkNjNiJWZ2MDNzMTN2MWO3YWMmBzN5kjMk9CX2AzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL3M3Lc9CX6MHc0RHaiojIsJye.png)
這裡看起來是xhr發送的資料
response傳回的是一個頁面:
這是我切的一個普通a連結的network圖:
這是ajax搜尋表單對應的Controller的方法:
現在懂了。這個打着ajax搜尋表單的東西雖然是一個ajax,但是又可以說不是一個ajax。它屬于ajxa是因為整個頁面代碼都是ajax進去的。但是它說不是ajax是因為它返還的頁面會将原來的頁面片段重新整理,甚至回顯使用的都是el
文法要求:
兩種初始化方式:
Data屬性:form添加屬性data-toggle=“ajaxsearch”
JqueryAPI:$(form).bjuiajax('doSearch',options)
url
【必選】D-Url 處理搜尋的url,如果未指定,預設表示指定form的action
clearQuery
【可選】清除查詢條件
小技巧:
搜尋表單内的按鈕或者a連結添加屬性data-toggle=“reloadsearch”可觸發表單重載(主要用于清空查詢)
注意:
不要誤解了清空查詢的意思,清空查詢指的清空查詢條件,并且進行一次查詢。
例子:
4、ajax加載DOM,局部重新整理
架構會為局部重新整理的容器添加class[bjui-layout],以保證重新整理DIV時不影響其他内容。
加載DOM:
Data屬性:元素添加屬性data-toggle="ajaxload"後,單擊觸發 或 容器(如:div)添加屬性data-toggle="autoajaxload"之後,自動加載url指定内容
jqueryAPI:
加載:
$(selector).bjuiajax('doLoad',options)
重新整理DOM
Data屬性:元素添加屬性data-toggle="refreshlayout"後,單機可以重新整理指定容器
jqueryAPI:
重新整理:$(selector).bjuiajax('regreshLayout',options)
重新整理指定ID的div容器,多個id以,分隔:
$(selector).bjuiajax('refreshDiv',divid)
參數
target
selector
【必選】目标容器的jquery選擇器或者DOM對象
【必選】D-Url 遠端加載的url,a連結觸發時可以解除安裝href裡面
type
String
GET
【可選】ajax請求方式
data
object
【可選】ajax請求發送到伺服器的資料
【可選】ajax時是否顯示資料遮罩
autorefresh
boolean/int(秒)
【可選】指定div是否可自動重新整理,為true時預設15秒自動重新整理,指定具體的秒數以指定的間隔自動重新整理
5、Ajax動作
Ajax動作(如:删除、導出)
doAjax(适用于 删除 等)
DOM:
doExport(使用于 導出)
DOM
突然感覺抄API沒激情。是以用到了再做筆記吧。
doAjaxChecked(适用于 <code>選中項删除</code> 等):
DOM示例代碼:
<code>1</code>
<code><</code><code>a</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn btn-default"</code> <code>href</code><code>=</code><code>"ajaxDone3.html"</code> <code>data-toggle</code><code>=</code><code>"doajaxchecked"</code> <code>data-group</code><code>=</code><code>"delids"</code><code>data-confirm-msg</code><code>=</code><code>"确定要删除選中項嗎?"</code><code>>批量删除動作</</code><code>a</code><code>></code>
jQuery API:
<code>$(selector).bjuiajax(</code><code>'doAjaxChecked'</code><code>, options)</code>
doExportChecked(适用于 <code>選中項導出</code>):
<code><</code><code>a</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"btn btn-default"</code> <code>href</code><code>=</code><code>"ajaxDone3.html"</code> <code>data-toggle</code><code>=</code><code>"doexportchecked"</code><code>data-confirm-msg</code><code>=</code><code>"确定要導出選中項嗎?"</code><code>>批量導出</</code><code>a</code><code>></code>
<code>$(selector).bjuiajax(</code><code>'doExportChecked'</code><code>, options)</code>
[必選] D-Url ajax處理的URL,a連結觸發時可以将url定義在href屬性。
POST
[可選] ajax請求方式。(<code>導出類動作無效</code>)
[可選] ajax請求發送到伺服器的資料。(<code>導出類動作無效</code>)
confirmMsg
[可選] 執行動作前的确認提示。
function(json)
[可選] 回調函數。
[可選] ajax請求時是否顯示資料加載遮罩。
group
<code>[批量操作專用 - 必選]</code> 選項checkbox框的名稱。
idname
ids
<code>[批量操作專用 - 可選]</code> 發送到服務端的參數名稱,發送到服務端的id值以<code>,</code>分隔。
本節涉及的<code>selector</code>,請盡量使用該容器内部的元素,否則會影響預設回調函數的正确執行。