# ajax屬性API ## ajax數據屬性api 數據屬性API可以讓你在不使用任何Javascript代碼前提下發起一個AJAX請求，很多時候數據屬性API將會被Javascript API更簡潔，寫更少的代碼得到相同的結果。以下是支持的數據屬性： | 屬性 | 描述 | | --- | --- | | data-request | 指定AJAX處理程序名稱 | | data-request-confirm | 指定一個確認信息，請求被發送前會顯示此確認消息，如果用戶點擊取消按鈕，請求將不會被發送。 | | data-request-redirect | 當AJAX請求被成功執行后，瀏覽器會被重定向到此處指定的URL | | data-request-update | 指定一個被更新的塊和頁面元素（CSS選擇器）列表，格式如下：`partial: selector, partial: selector`，有些情況下需要使用引號，比如，`'my-partial': '#myelement'`。如果選擇器字符串前面追加了`@`符號，從服務器接收到的內容會被追加到所述元素上，而不是替換現有內容。如果選擇器字符前面追加了`^`符號，內容將會被追加到元素的開始處。 | | data-request-data | 指定追加發送給服務器的POST數據，格式如下：`var: value, var: value`。如果需要`var: 'some string'`可以使用`&`符號。屬性可以在觸發元素上使用，例如在按鈕上同樣擁有`data-request`屬性，on the closest element of the triggering element and on the parent form element. The framework merges values of the`data-request-data`attributes. If the attribute on different elements defines parameters with the same name, the framework uses the following priority: the triggering element`data-request-data`, the closer parent elements`data-request-data`, the form input data. | | data-request-before-update | 指定在頁面內容更新之前被執行的Javascript代碼，在JS代碼中你可以使用以下變量：`$el`(觸發請求的頁面元素)，`context`對象，從服務器上接收到的`data`對象，`textStatus`字符串，以及`jqXHR`對象。 | | data-request-success | 指定在請求成功完成后執行的JS代碼，在JS代碼中可以使用以下變量：`$el`(觸發請求的頁面元素)，`context`對象，從服務器上接收到的`data`對象，`textStatus`字符串，以及`jqXHR`對象。 | | data-request-error | 指定在請求遇到錯誤時執行的JS代碼，代碼中可以使用以下變量：`$el`(觸發請求的頁面元素)，`context`對象，`textStatus`字符串，以及`jqXHR`對象。 | | data-request-loading | 當請求正在執行時，指定一個將被顯示的頁面元素的CSS選擇器，你可以使用這個選項來顯示一個AJAX進度器，可以使用jQuery的`show()`和`hide()`方法來控制元素的可見性。 | | data-track-input | 可以應用到文本或密碼字段，它們同樣可以擁有`data-request`屬性，定義之后，當用戶在自動中輸入字符時AJAX請求會自動發送到服務器，這個可選屬性可以定義時間間隔（interval，毫秒），框架會在發起請求前進行等待。 | 當為一個元素定義了`data-request`屬性，用戶影響元素事件后會觸發AJAX請求。AJAX請求會根據元素類型，在對應事件觸發時發送請求： | 元件 | 事件 | | --- | --- | | Forms | 當表單被提交后 | | Links, buttons | 當元素被點擊后 | | 文本和密碼字段 | 當`data-track-input`屬性被指定，且元素值被改變時 | | 下拉列表，單選框，復選框 | 當元素被選擇時 | ##### 數據屬性API例子 當表單被提交后，會觸發`onCalculate`處理程序，將會更新`calcresult`塊中ID為`result`的元素。 ``` <form data-request="onCalculate" data-request-update="calcresult: '#result'"> ``` 當點擊了刪除按鈕，會在請求發送前顯示一個確認信息： ``` <form ... > ... <button data-request="onDelete" data-request-confirm="Are you sure?">Delete</button> ``` 請求被成功執行后會重定向到另一個頁面去： ``` <form data-request="onLogin" data-request-redirect="/admin"> ``` 成功執行請求后會顯示一個彈框 ``` <form data-request="onLogin" data-request-success="alert('Yay!')"> ``` 發送一個POST參數，參數名為`mode`，值為`update` ``` <form data-request="onUpdate" data-request-data="mode: 'update'"> ``` 為多個請求指定一個值為`7`，名稱為`id`的POST參數 ``` <div data-request-data="id: 7"> <button data-request="onDelete">Delete</button> <button data-request="onSave">Update</button> </div> ``` 包括帶有請求的[文件上傳](https://octobercms.com/docs/services/request-input#files)： ``` <form data-request="onSubmit" data-request-files> <input type="file" name="photo" accept="image/*" /> <button type="submit">Submit</button> </form> ```