# ajax属性API ## ajax数据属性api 数据属性API可以让你在不使用任何Javascript代码前提下发起一个AJAX请求，很多时候数据属性API将会被Javascript API更简洁，写更少的代码得到相同的结果。以下是支持的数据属性： | 属性 | 描述 | | --- | --- | | data-request | 指定AJAX处理程序名称 | | data-request-confirm | 指定一个确认信息，请求被发送前会显示此确认消息，如果用户点击取消按钮，请求将不会被发送。 | | data-request-redirect | 当AJAX请求被成功执行后，浏览器会被重定向到此处指定的URL | | data-request-update | 指定一个被更新的块和页面元素（CSS选择器）列表，格式如下：`partial: selector, partial: selector`，有些情况下需要使用引号，比如，`'my-partial': '#myelement'`。如果选择器字符串前面追加了`@`符号，从服务器接收到的内容会被追加到所述元素上，而不是替换现有内容。如果选择器字符前面追加了`^`符号，内容将会被追加到元素的开始处。 | | data-request-data | 指定追加发送给服务器的POST数据，格式如下：`var: value, var: value`。如果需要`var: 'some string'`可以使用`&`符号。属性可以在触发元素上使用，例如在按钮上同样拥有`data-request`属性，on the closest element of the triggering element and on the parent form element. The framework merges values of the`data-request-data`attributes. If the attribute on different elements defines parameters with the same name, the framework uses the following priority: the triggering element`data-request-data`, the closer parent elements`data-request-data`, the form input data. | | data-request-before-update | 指定在页面内容更新之前被执行的Javascript代码，在JS代码中你可以使用以下变量：`$el`(触发请求的页面元素)，`context`对象，从服务器上接收到的`data`对象，`textStatus`字符串，以及`jqXHR`对象。 | | data-request-success | 指定在请求成功完成后执行的JS代码，在JS代码中可以使用以下变量：`$el`(触发请求的页面元素)，`context`对象，从服务器上接收到的`data`对象，`textStatus`字符串，以及`jqXHR`对象。 | | data-request-error | 指定在请求遇到错误时执行的JS代码，代码中可以使用以下变量：`$el`(触发请求的页面元素)，`context`对象，`textStatus`字符串，以及`jqXHR`对象。 | | data-request-loading | 当请求正在执行时，指定一个将被显示的页面元素的CSS选择器，你可以使用这个选项来显示一个AJAX进度器，可以使用jQuery的`show()`和`hide()`方法来控制元素的可见性。 | | data-track-input | 可以应用到文本或密码字段，它们同样可以拥有`data-request`属性，定义之后，当用户在自动中输入字符时AJAX请求会自动发送到服务器，这个可选属性可以定义时间间隔（interval，毫秒），框架会在发起请求前进行等待。 | 当为一个元素定义了`data-request`属性，用户影响元素事件后会触发AJAX请求。AJAX请求会根据元素类型，在对应事件触发时发送请求： | 元件 | 事件 | | --- | --- | | Forms | 当表单被提交后 | | Links, buttons | 当元素被点击后 | | 文本和密码字段 | 当`data-track-input`属性被指定，且元素值被改变时 | | 下拉列表，单选框，复选框 | 当元素被选择时 | ##### 数据属性API例子 当表单被提交后，会触发`onCalculate`处理程序，将会更新`calcresult`块中ID为`result`的元素。 ``` <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'"> ``` 为多个请求指定一个值为`7`，名称为`id`的POST参数 ``` <div data-request-data="id: 7"> <button data-request="onDelete">Delete</button> <button data-request="onSave">Update</button> </div> ``` 包括带有请求的[文件上传](https://octobercms.com/docs/services/request-input#files)： ``` <form data-request="onSubmit" data-request-files> <input type="file" name="photo" accept="image/*" /> <button type="submit">Submit</button> </form> ```