天天看點

Ajax

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搜尋表單?指的是什麼?

說實話,我有點迷糊。

Ajax

這裡看起來是xhr發送的資料

response傳回的是一個頁面:

Ajax

這是我切的一個普通a連結的network圖:

Ajax

這是ajax搜尋表單對應的Controller的方法:

Ajax

現在懂了。這個打着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>&lt;</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>&gt;批量删除動作&lt;/</code><code>a</code><code>&gt;</code>

jQuery API:

<code>$(selector).bjuiajax(</code><code>'doAjaxChecked'</code><code>, options)</code>

doExportChecked(适用于 <code>選中項導出</code>):

<code>&lt;</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>&gt;批量導出&lt;/</code><code>a</code><code>&gt;</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>,請盡量使用該容器内部的元素,否則會影響預設回調函數的正确執行。