插件 jQuery.ujs 中文API文档
插件 jQuery.ujs 中文API文档
源码 & 下载
- Github地址：https://github.com/rails/jquery-ujs
- 源码下载： -
- 效果演示： -
适用场景
Ruby on Rails用于jQuery的不显眼的脚本编写适配器
插件特点
这个不显眼的脚本支持文件是为Ruby on Rails框架开发的，但并不严格依赖于任何特定的后端。您可以将其放入任何应用程序中：
- 强制确认各种动作的对话框;
- 从超链接发出非GET请求;
- 使表单或超链接与Ajax异步提交数据;
- 提交按钮会在表单提交时自动禁用，以防止双击。
通过向HTML标记添加某些"数据"属性来实现这些功能。在Rails中，它们是由框架的模板助手添加的。
要求:jQuery 1.8.x或更高版本 ，HTML5 doctype（可选）;
如果您不使用HTML5，则向HTML4或XHTML页面添加"data"属性可能会使它们无法通过W3C标记验证。但是，这不应该为Web浏览器或其他用户代理创建任何问题。
对jQuery的不显眼的脚本支持
“data-confirm”：链接和表单的确认对话框
<form data-confirm="Are you sure you want to submit?">...</form>
此属性的存在表示应截取激活链接或提交表单，以便向用户呈现confirm()包含属性值的文本的JavaScript 对话框。如果用户选择取消，则不会执行该操作。
表单提交按钮也允许使用该属性。这允许您根据激活的按钮自定义警告消息。在这种情况下，你应该不是也有形式本身的"数据确认"。
默认确认使用javascript确认对话框，但您可以通过监听confirm事件来自定义它，该事件在用户显示确认窗口之前触发。要取消此默认确认，请使确认处理程序返回false。
“data-disable-with”：自动禁用链接并在表单中提交按钮
<input type="submit" value="Save" data-disable-with="Saving...">
此属性表示在提交表单时应禁用提交按钮，输入字段。这是为了防止用户意外双击，这可能导致后端可能无法检测到的重复HTTP请求。属性的值是将成为处于禁用状态的按钮的新值的文本。
这也适用于具有data-method属性的链接。
“data-method”：导致POST，PUT或DELETE请求的链接
<a href="..." data-method="delete" rel="nofollow">Delete this entry</a>
激活超链接（通常通过单击或点击它们）总是会产生HTTP GET请求。但是，如果您的应用程序是RESTful，则某些链接实际上是更改服务器上的数据的操作，必须使用非GET请求执行。此属性允许使用显式方法标记此类链接，例如"post"，“put"或"delete”。
它的工作方式是，当链接被激活时，它在文档中构造一个隐藏的表单，其中"action"属性对应于链接的"href"值和对应于"data-method"值的方法，并提交那种形式。
非Rails后端的注意事项：因为在浏览器中不广泛支持使用除GET和POST之外的HTTP方法提交表单，所有其他HTTP方法实际上是通过POST发送的，其中使用了"_method"参数中指示的预期方法。Rails框架自动检测并补偿这一点。
“data-remote”：使链接和表单与Ajax异步提交
<form data-remote="true" action="...">
...
</form>
此属性表示要异步提交链接或表单; 也就是说，没有页面刷新。
如果后端配置为返回这些请求的JavaScript代码段，则一旦请求完成，这些代码段将在页面上执行。或者，您可以处理已发布的自定义事件以挂接到Ajax请求的生命周期。
“data-type”：为"数据远程"请求设置Ajax请求类型
<form data-remote="true" data-type="json">...</form>
此可选属性dataType在执行"data-remote"元素的请求时显式定义Ajax 。
“data-url"和"data-remote”：在元素更改事件后将AJAX请求发送到给定的URL
<input type="checkbox" name="task" id="task" value="1" data-url="/tasks/1" data-remote="true" data-method="post">
更改复选框的值（通过单击它）将创建新的AJAX POST请求到data-url使用从serialize()复选框上运行的jQuery 方法获得的参数定义的URL 。
这也可以应用于任何其他input，select或textarea元件。
“data-params”：向请求添加其他参数
<a data-remote="true" data-method="post" data-params="param1=Hello+server" href="/test">AJAX action with POST request</a>
激活链接将发送带有附加参数param1值的AJAX POST请求Hello server。
您还可以使用转义的JSON data-params。当您使用Rails的link_to帮助程序创建链接并在a中指定参数时，它非常有用Hash。
<a data-remote="true" data-method="post" data-params="{"param1":"Hello server"}" href="/test">AJAX action with POST request</a>
在"数据远程"请求期间触发的自定义事件 / AJAX
标有“data-remote”属性的表单和链接随之提交jQuery.ajax()。除了正常的jQuery Ajax“全局”事件之外，这些自定义事件还从这些DOM元素中触发：
| 事件名称 | 事件后的参数* | 什么时候 |
|---|---|---|
| ajax:before | 在整个ajax业务之前，如果停止就会中止 | |
| ajax:beforeSend | [ xhr，设置] | 在发送请求之前，如果停止则中止 |
| ajax:send | [ XHR] | 发送请求时 |
| ajax:success | [ 数据，状态，xhr] | 完成后，如果HTTP响应成功 |
| ajax:error | [ xhr，状态，错误] | 完成后，如果服务器返回错误 |
| ajax:complete | [ xhr，状态] | 请求完成后，无论结果如何 |
| ajax:aborted:required | [ 元素] | 当表单中有空白必填字段时，如果停止则无论如何都会提交 |
| ajax:aborted:file | [ 元素] | 如果存在非空白输入：表单中的文件字段，则在中止时中止 |
重要
*绑定到jQuery事件的所有处理程序始终作为第一个参数传递事件对象。额外参数表示在事件参数之后传递的参数。例如，如果将Extra参数列为[ xhr, settings]，则要访问它们，您将使用定义处理程序function(event, xhr, settings){}。有关更深入的解释，请参阅此文章。
**戏完全是其处理的jQuery的Ajax错误的反应不一致，因此依靠的值xhr.status，status或error在ajax:error回调处理程序可能会导致在Opera不一致的行为。
可停止的事件
如果停止ajax:before或从处理程序方法ajax:beforeSend返回false，则永远不会发生Ajax请求。该ajax:before事件对于在序列化之前操作表单数据也很有用。该ajax:beforeSend事件对于添加自定义请求标头也很有用。
如果您停止ajax:aborted:required活动，则会取消中止表单提交的默认行为，因此无论如何都会提交表单。
如果您停止该ajax:aborted:file事件，则允许浏览器通过正常方式（即非AJAX提交）提交表单的默认行为将被取消，并且表单将不会被提交。这对于实现您自己的AJAX文件上载解决方法很有用。
用法示例 在服务器上处理请求失败时，它可能会以HTML格式返回错误消息：
$('#account_settings').on('ajax:error', function(event, xhr, status, error) {
// insert the failure message inside the "#account_settings" element
$(this).append(xhr.responseText)
});
仅为特定类型的表单设置自定义HTTP标头：
$('form.new_conversation').on('ajax:beforeSend', function(event, xhr, settings) {
xhr.setRequestHeader('X-Awesome', 'enabled');
});
文章
http://www.alfajango.com/blog/rails-3-remote-links-and-forms/ http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/ http://www.alfajango.com/blog/rails-jquery-ujs-now-interactive/ http://www.alfajango.com/blog/new-ajax-aborted-rails-jquery-ujs-callbacks/ http://blog.bigbinary.com/2012/05/11/jquery-ujs-and-jquery-trigger.html http://robots.thoughtbot.com/a-tour-of-rails-jquery-ujs/
常见问题和提示
当我按ENTER键时，Internet Explorer不提交我的表单
IE实际上认为这是一个功能（坚持，给他们一个机会）。看到这篇文章解释为什么这不一定是坏事。
如果你真的想要IE提交表单，那么有几种解决方法。一个很好的解决方法是，如果你在表单中包含一个与name提交输入相同的隐藏输入字段，IE将在ENTER上提交表单。
<input type="hidden" name="find" />
<input type="submit" name="find" value="Find" />
