# 使用 * 主要在插件中使用 * 插件也主要是在后臺使用 * 前端主題暫未找到實現ajax的辦法 ## ajax的使用 ### 引入jq ``` <pre class="calibre11">``` <script src="{{ 'assets/javascript/jquery.js' | theme }}"></script> ``` ### 設置后端調用方法 ``` <pre class="calibre11">``` <!-- Attributes API --> <button data-request="onSubmitContactForm">Go</button> <!-- JavaScript API --> <script> $.request('onSubmitContactForm') </script> <!-- 調用組件--> <button data-request="mycomponent::onSubmitContactForm">Go</button> ``` 如果[`__SELF__`](https://octobercms.com/docs/plugin/components#referencing-self)用戶更改了頁面上使用的組件別名，則可能要使用引用變量而不是硬編碼別名。 ``` <pre class="calibre11">``` <form data-request="{{ __SELF__ }}::onCalculate" data-request-update="'{{ __SELF__ }}::calcresult': '#result'"> ``` #### 通用處理程序`onAjax` - 當頁面不需要執行處理的代碼的時候使用 ``` <pre class="calibre11">``` <button data-request="onAjax">Do nothing</button> ``` ### 后臺處理方法 - `mycomponent::onSubmitContactForm` 是`mycomponent`組件`onSubmitContactForm`的處理方法 - 當沒有`::`的時候是當前控制器的處理方法，也可以是當前操作\_on方法組合的ajax方法 - 請求方法必須使用前綴`on`不然可能會報錯 ### ajax接收返回的參數`data-request-success` - 可以使用數據屬性API獲取數據： ``` <pre class="calibre11">``` <form data-request="onHandleForm" data-request-success="console.log(data)"> ``` - 也可以與JavaScript API相同： ``` <pre class="calibre11">``` <form onsubmit="$(this).request('onHandleForm', { success: function(data) { console.log(data); } }); return false; "> ``` ### 后臺拋出AJAX異常 AJAX異常類`AjaxException` ``` <pre class="calibre11">``` throw new AjaxException([ 'error' => 'Not enough questions', 'questionsNeeded' => 2 ]); ``` > **注意**：拋出此異常類型時，[局部變量將](https://octobercms.com/docs/ajax/update-partials)正常[更新](https://octobercms.com/docs/ajax/update-partials)。 ### ajax程序處理之前的操作 `onInit` `onInit`函數為頁面執行生命周期的一部分，在每個AJAX處理程序之前運行。 ``` <pre class="calibre11">``` function onInit() { // 從頁面或布局PHP代碼部分 } ``` 可以使用`init`在組件類后端窗口小部件類中定義。 ``` function init() { // 從組件或小部件類 } ```