AJAX 架构

Introduction
包括框架
AJAX 请求如何工作
使用示例

Introduction

Winter 包含一个框架，它带来了全套 AJAX 功能，允许您从服务器加载数据而无需刷新浏览器页面。可以使用相同的库内容管理系统主题和任何地方后台管理区.

AJAX 框架有两种风格，您可以使用JavaScript API 或者数据属性 API.数据属性 API 不需要任何 JavaScript 知识即可在 Winter 中使用 AJAX。

包括框架

AJAX 框架在您的应用程序中是可选的内容管理系统主题，要使用该库，您应该通过放置{% framework %} 在你的任何地方做标记page 或者layout.这会添加对 Winter 前端 JavaScript 库的引用。该库需要 jQuery，因此应首先加载它，例如：

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

{% framework %}

这{% framework %} 标签支持可选extras 范围。如果指定了此参数，则标记会添加 StyleSheet 和 JavaScript 文件额外功能，包括表单验证和加载指示器。

{% framework extras %}

AJAX 请求如何工作

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

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

NOTE：取决于页面上下文CMS部分或者后端部分视图将被渲染。

使用示例

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

<!-- 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>

NOTE：表单数据为value1 和value2 与 AJAX 请求一起自动发送。

这mypartial 部分包含读取的标记result 多变的。

The result is {{ result }}

这onTest 处理程序方法使用input 辅助方法并将结果传递给result 页面变量。

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

这个例子可以这样读：“提交表单时，向onTest 处理程序。当处理程序完成时，呈现mypartial 部分并将其内容注入#myDiv 元素。”

AJAX 架构

#Introduction

#包括框架

#AJAX 请求如何工作

#使用示例

Introduction

包括框架

AJAX 请求如何工作

使用示例