阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.ujs 中文API文档

      插件 jQuery.ujs 中文API文档

      源码 & 下载

      适用场景

      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="{&quot;param1&quot;:&quot;Hello server&quot;}" 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" />
      
      目录
      目录