引言

October CMS 包含一个AJAX框架，它提供了一整套功能，允许您无需刷新浏览器即可从服务器加载数据。相同的库可以在CMS主题中以及管理面板的任何地方使用。

AJAX 框架有两种形式, 您可以使用 JavaScript API 或 数据属性 API. 数据属性 API 无需任何 JavaScript 知识即可在 October CMS 中使用 AJAX.

引入框架

AJAX 框架在您的 CMS 主题中是可选的，您始终可以包含您偏好的框架来替代。

当您使用您的 CMS 主题，使用该库就像包含一个 Twig 标签一样简单。将 {% framework %} 标签放置在您的页面或布局中的任何位置。这将添加对 October CMS 前端 JavaScript 库的引用，例如。

{% framework %}

额外功能

{% framework %} 标签支持一个可选的 extras 参数，该参数包含额外的样式表和JavaScript文件，用于实现额外功能，包括 表单验证，加载指示器，以及 闪存消息。

{% framework extras %}

您也可以包含 turbo 参数以启用 涡轮增压路由 在每个页面上。

{% framework extras turbo %}

AJAX 请求的工作原理

页面可以发出AJAX请求，这可以由数据属性触发，也可以通过使用JavaScript。每个请求都会在服务器上调用一个事件处理程序 -- 也称为一个AJAX处理程序 -- 并可以使用局部视图更新页面元素。AJAX请求最适用于表单，因为表单数据会自动发送到服务器。以下是请求工作流：

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

使用示例

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

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

<!-- AJAX enabled form -->
<form data-request="onTest" data-request-update="{ mypartial: '#myDiv' }">

    <!-- Input two values -->
    <input name="value1"> + <input name="value2">

    <!-- Action button -->
    <button type="submit">Calculate</button>

</form>

<!-- Result container -->
<div id="myDiv"></div>

:::

该 mypartial 局部模板包含用于读取 result 变量的标记。

<p>The answer is {{ result }}</p>

**onTest** 处理方法使用 input [辅助方法](../../extend/services/helpers.md) 访问了表单数据并且结果被传递给 result 页面变量。

function onTest()
{
    $this['result'] = input('value1') + input('value2');
}

这个例子可以这样理解："当表单提交时，向 onTest 处理程序发出AJAX请求。当处理程序完成时，渲染 mypartial 局部视图并将其内容注入到 #myDiv 元素中。"

另请参阅

• JavaScript API
• 数据属性 API