AJAX 请求（数据属性 API）

Introduction
可用数据属性
使用示例

Introduction

Data Attributes API 是将 AJAX 功能嵌入到主题和插件中的更简单方法，并且无需使用 JavaScript。虽然JavaScript API 与原来相比有很多变化AJAX框架，尽管由新的 Snowboard 框架提供支持，但数据属性 API 基本保持不变。

可以通过将以下标记添加到 CMS 主题的页面或布局中来加载它：

{% snowboard request attr %}

NOTE: 根据迁移指南，不再允许通过数据属性 API 使用任意 JavaScript。就这样data-request-before-update,data-request-success,data-request-error 和data-request-complete 不再支持属性。请使用JavaScript API 如果您需要此功能。

可用数据属性

从有效元素触发 AJAX 请求就像添加data-request 该元素的属性。这通常应该在按钮、链接或表单上完成。您还可以使用以下属性自定义 AJAX 请求：

Attribute	Description
`data-request`	指定要作为请求目标的 AJAX 处理程序名称。
`data-request-confirm`	指定在继续请求之前向用户显示的确认消息。如果用户取消，则不会发送请求。
`data-request-redirect`	如果收到成功的 AJAX 响应，指定将浏览器重定向到的 URL。
`data-request-url`	指定要将 AJAX 请求发送到的 URL。默认情况下，这将是当前 URL。
`data-request-update`	指定部分列表和页面元素（CSS 选择器）以在成功的 AJAX 响应时更新。格式如下：`partial: selector, partial: selector`.在大多数情况下需要使用引号：`'partial': 'selector'`.如果选择器前面有一个`@` symbol，将从服务器接收到的内容附加到该元素。如果选择器前面有一个`^` 符号，内容将被添加到前面。否则，接收到的内容将替换元素中的原始内容。
`data-request-data`	指定与请求一起发送到服务器的附加数据。格式如下：`'var': 'value', 'var2': 'new value'`.您还可以在触发元素的任何父元素上指定相同的属性，并且此数据将与父数据合并（触发数据优先）。如果此请求在表单内触发，它还将与任何表单数据合并。
`data-request-form`	指定 AJAX 请求将包含其数据的表单。如果未指定，将使用最接近的形式，或者如果元素本身是一种形式，则将使用它。
`data-request-flash`	指定是否从响应中接受 flash 消息。
`data-request-files`	指定文件数据是否包含在请求中。这将允许表单中的任何文件输入工作。
`data-browser-validate`	指定是否触发内置浏览器验证。如果存在，如果浏览器验证失败，请求将被取消。
`data-track-input`	指定输入是否会在输入更改时触发 AJAX 请求。可以在此属性中指定一个可选数字，它表示任何更改与 AJAX 请求触发之间的毫秒数。

当。。。的时候data-request 为元素指定属性，当用户与其交互时，该元素会触发 AJAX 请求。根据元素的类型，请求会在以下事件中触发：

Element	Event
Forms	提交表单时。
链接、按钮	单击元素时。
文本、数字和密码字段	当文本被更改并且仅当`data-track-input` 属性被呈现。
下拉菜单、复选框、收音机	选择元素时。

使用示例

触发onCalculate 提交表单时的处理程序。使用标识符“result”更新元素calcresult 部分的：

<form data-request="onCalculate" data-request-update="calcresult: '#result'">

在发送请求之前单击删除按钮时请求确认：

<form ... >
    ...
    <button data-request="onDelete" data-request-confirm="Are you sure?">Delete</button>

请求成功后重定向到另一个页面：

<form data-request="onLogin" data-request-redirect="/admin">

发送 POST 参数mode 有一个值update:

<form data-request="onUpdate" data-request-data="mode: 'update'">

发送 POST 参数id 有价值7 跨多个元素：

<div data-request-data="id: 7">
    <button data-request="onDelete">Delete</button>
    <button data-request="onSave">Update</button>
</div>

包括文件上传有一个要求：

<form data-request="onSubmit" data-request-files>
    <input type="file" name="photo" accept="image/*" />
    <button type="submit">Submit</button>
</form>

AJAX 请求（数据属性 API）

#Introduction

#可用数据属性

#使用示例

Introduction

可用数据属性

使用示例