AJAX 入门

介绍

ctober包含一jquery框架，它带来了一整套AJAX功能，允许您从服务器加载数据而无需刷新浏览器页面。可以在CMS主题和后端管理区域中的任何位置使用相同的库。

AJAX框架有两种形式，您可以使用JavaScript API或数据属性API。数据属性API不需要任何JavaScript知识就可以在October中使用AJAX。

引入AJAX框架

AJAX框架在您的CMS主题中是可选的，要使用您应该包含它的库，将{%framework%}标记放在[page]中的任何位置(../cms)/pages)或layout。这增加了对October前端JavaScript库的引用。该库需要jQuery，因此应首先加载它，例如：

  1. <script src="{{ 'assets/javascript/jquery.js'|theme }}"></script>
  3. {% framework %}

{%framework%}标签支持可选的extras参数。如果指定了此参数，则标记会为extra features添加StyleSheet和JavaScript文件，包括表单验证和加载指示符。

  1. {% framework extras %}

AJAX请求是如何工作的

页面可以发出由数据属性提示或使用JavaScript的AJAX请求。每个请求在服务器上调用事件处理程序 - 也称为AJAX处理程序 - 并且可以使用partials更新页面元素。 AJAX请求最适合表单，因为表单数据会自动发送到服务器。这是请求工作流程：

  1. 客户端浏览器通过提供处理程序名称和其他可选参数来发出AJAX请求。
  2. 服务器找到AJAX处理程序并执行它。
  3. 处理程序执行所需的业务逻辑，并通过注入页面变量来更新环境。
  4. 客户端使用update选项请求的服务器渲染部分。
  5. 服务器发送包含呈现的部分标记的响应。
  6. 客户端框架使用从服务器接收的部分数据更新页面元素。

注意: 根据页面上下文，将呈现CMS部分或backend partial视图。

使用示例

下面是一个使用数据属性API定义启用AJAX的表单的简单示例。该表单将向onTest处理程序发出一个AJAX请求，并请求使用mypartial部分标记更新结果。

  1. <!-- 支持AJAX的表单 -->
  2. <form data-request="onTest" data-request-update="mypartial: '#myDiv'">
  4.     <!-- 输入两个值 -->
  5.     <input name="value1"> + <input name="value2">
  7.     <!-- Action button -->
  8.     <button type="submit">计算</button>
  10. </form>
  12. <!-- 结果 -->
  13. <div id="myDiv"></div>

注意: value1和value2的表单数据随AJAX请求自动发送。

mypartialpartial包含读取result变量的标记。

  1. 结果是 {{ result }}

onTest处理程序方法使用input 的helper方法获取表单数据，结果传递给result页面变量。

  1. function onTest()
  2. {
  3.     $this->page['result'] = input('value1') + input('value2');
  4. }

这个例子可以这样理解：“当提交表单时，向onTest处理程序发出一个AJAX请求。当处理程序完成时，渲染mypartialpartial并将其内容注入#myDiv 元素。”