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 参数以在每个页面上启用 turbo-charged 路由。
{% framework extras turbo %}页面可以发起 AJAX 请求,无论是通过数据属性触发还是通过使用 JavaScript。每个请求都会在服务器上调用一个 事件处理程序 -- 也称为一个 AJAX 处理程序 -- 并且可以使用分部视图更新页面元素。AJAX 请求最适合与表单配合使用,因为表单数据会自动发送到服务器。以下是请求工作流:
update 选项请求的。下面是一个使用数据属性 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 辅助方法 访问了表单数据并将结果传递给 result 页面变量。
function onTest()
{
$this['result'] = input('value1') + input('value2');
}这个例子可以这样理解:“当表单提交时,向 onTest 处理器发出 AJAX 请求。当处理器完成时,渲染 mypartial 分部视图并将其内容注入到 #myDiv 元素中。”