Question

修改

除了下面的有用评论之外，史蒂夫施瓦茨的两篇优秀文章清楚地解释了一切：

Rails 3.2.2 / jquery-rails 2.0.1 （使用jquery 1.7.1）

我有链接发送AJAX请求以向表单添加其他文件上载字段。 与页面相关的所有内容都能正常工作 - 从服务器检索新的表单字段HTML片段并将其附加到表单内的div。

然而，

服务器收到两个GET请求。一个是AJAX请求;另一个似乎是“正常”锚元素GET。我预计Rails UJS会阻止“正常”的GET。

我应该自己禁用正常的链接操作吗？有人可以解释一下我误解了什么，以及我应该做什么而不是[以防止第二次请求]？

我见过这个问题：Rails 3 UJS - controller gets called twice by link_to :remote。因此，我尝试更改资产管道编译config.assets.debug = false，但它没有任何效果。此外，这不是双AJAX GET请求，所以我认为这是一个不同的问题。

感谢您的帮助！

服务器日志摘要：

Started GET "/files/new?asset_number=2" for 127.0.0.1 at 2012-03-23 15:23:27 +0100

Started GET "/files/new" for 127.0.0.1 at 2012-03-23 15:23:27 +0100

浏览器HTML：

<a href="/files/new" data-remote="true" id="add_another_file" position="after" update="files">Add another file</a>

查看：

<%= link_to 'Add another file', new_file_path, :remote   => true,
                                               :update   => 'files',
                                               :position => 'after',
                                               :id       => 'add_another_file' %>

控制人员的coffeescript：

$( ->
  $('a#add_another_file').click( ->
    url = '/files/new?asset_number=' + $('#files input').length
    $.get(url, ((data) -> $('#files').append(data)), 'html')))

Answer 1

如果您要向click添加a#add_another_file事件，则无需使用:remote => true，因为您手动发出了Ajax请求。

此外，click事件应阻止发生默认操作。这可以通过将event.preventDefault();添加到单击事件的回调的开头来实现。请注意，回调需要接受event参数。

Answer 2

如果您要使用:remote => true选项，则应删除已添加的自定义单击事件。这是因为:remote => true选项告诉* jquery_ujs *库劫持a#add_another_file的点击次数。因此，您无需自己发出HTTP请求。

接下来，要确定响应的内容，请绑定a#add_another_file上发生的各种事件，例如成功和错误。

这是full list of Ajax events that you can bind to。

Answer 3

实际上非常简单，您的远程link_to正在发送一个请求（没有参数），并且您在该链接上添加了一个点击事件以发送另一个请求（使用参数）。

您应该将link_to简化为：

<%= link_to 'Add another file', new_file_path, :id => 'add_another_file' %>

然后在您的click事件中，您应该返回false，因此它不会跟随网址。

看起来你在你的咖啡因中使用了很多不必要的括号。

$ ->
  $('a#add_another_file').click ->
    url = '/files/new?asset_number=' + $('#files input').length
    $.get url, ((data) -> $('#files').append(data)), 'html'

Rails UJS link_to：remote做AJAX GET和普通<a href=""> GET</a>

3 个答案: