数据属性 API

可用数据属性

数据属性 API 让您无需任何 JavaScript 即可发出 AJAX 请求。在许多情况下，数据属性 API 比 JavaScript API 更简洁——您只需编写更少的代码即可获得相同的结果。支持的 AJAX 数据属性是：

Attribute Description
data-request 指定 AJAX 处理程序名称。
data-request-confirm 指定确认消息。在发送请求之前显示确认。如果用户单击“取消”按钮，则不会发送请求。
data-request-redirect 指定在成功的 AJAX 请求后重定向浏览器的 URL。
data-request-url 指定将请求发送到的 URL。默认：window.location.href
data-request-update 指定要更新的部分列表和页面元素（CSS 选择器）。格式如下：partial: selector, partial: selector.在某些情况下需要使用引号，例如：'my-partial': '#myelement'.如果选择器字符串前面有@ 符号，从服务器接收到的内容将附加到元素，而不是替换现有内容。如果选择器字符串前面有^ 符号，内容将被添加到前面。
data-request-ajax-global false 默认情况下。放true 启用 jQuery阿贾克斯事件 全球范围内：ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess 和ajaxSend.
data-request-data 指定要发送到服务器的附加 POST 参数。格式如下：var: value, var: value.如果需要使用引号：var: 'some string'.该属性可以用在触发元素上，例如在按钮上也有data-request 属性，在触发元素的最近元素和父表单元素上。该框架融合了data-request-data 属性。如果不同元素上的属性定义了同名参数，则框架使用以下优先级：触发元素data-request-data, 越近的父元素data-request-data, 表单输入数据。
data-request-before-update 指定在更新页面内容之前直接执行的 JavaScript 代码。在 JavaScript 代码中，您可以访问以下变量：this （页面元素触发请求），context 对象，data 从服务器接收到的对象，textStatus 文本字符串，以及jqXHR 目的。
data-request-success 指定请求成功完成后要执行的 JavaScript 代码。在 JavaScript 代码中，您可以访问以下变量：this （页面元素触发请求），context 对象，data 从服务器接收到的对象，textStatus 文本字符串，以及jqXHR 目的。
data-request-error 指定在请求遇到错误时要执行的 JavaScript 代码。在 JavaScript 代码中，您可以访问以下变量：this （页面元素触发请求），context 对象，textStatus 文本字符串，以及jqXHR 目的。
data-request-complete 指定在请求成功完成或遇到错误时要执行的 JavaScript 代码。在 JavaScript 代码中，您可以访问以下变量：this （页面元素触发请求），context 对象，textStatus 文本字符串，以及jqXHR 目的。
data-request-loading 指定要在请求运行时显示的元素的 CSS 选择器。您可以使用此选项来显示 AJAX 加载指示器。该功能使用 jQuery 的show() 和hide() 管理元素可见性的功能。
data-request-form 明确指定用于获取表单数据的表单元素。如果未指定，则使用最接近触发元素的形式，包括元素本身是否为形式。
data-request-flash 指定时，此选项指示服务器清除并发送任何带有响应的 flash 消息。这个选项也被使用额外功能.
data-request-files 当指定请求将接受文件上传时，这需要FormData 浏览器的接口支持。
data-browser-validate 当指定此选项时，基于浏览器的客户端验证将在请求提交之前运行。这仅适用于在<form> 元素。NOTE: 这种验证形式不适用于复杂的表单，在复杂表单中，验证字段可能不会在 100% 的时间内对用户可见。建议您避免在最简单的表单以外的任何地方使用它。
data-track-input 可以应用于文本、数字或密码输入字段，该字段也具有data-request属性。定义后，当用户在字段中键入内容时，输入字段会自动发送 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">

请求成功后显示弹窗：

<form data-request="onLogin" data-request-success="alert('Yay!')">

发送 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>
豫ICP备18041297号-2
Please enter a query in order to search.