# 使用 * 主要在插件中使用 * 插件也主要是在后台使用 * 前端主题暂未找到实现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() { // 从组件或小部件类 } ```