使用 UJS、Rails 向 AJAX 请求添加数据答案

【问题标题】：Adding data to AJAX request using UJS, Rails使用 UJS、Rails 向 AJAX 请求添加数据
【发布时间】：2015-01-09 15:07:33
【问题描述】：

我有一个带有链接的 text_field_tag：

<div>
  <%= text_field_tag :requester_field %>
  <%= link_to "Add", add_requester_tasks_path, id: "requester_btn", remote: true %>
</div>

使用 rails UJS 单击 Add 按钮将触发 AJAX 请求到由 add_requester_task_path 指定的控制器操作。我可以使用 respond_to 块将脚本返回给浏览器。

将 text_field 的值添加到此请求的最佳方式是什么？

所以我可以通过参数哈希在控制器中访问它。

最好的方式是指最干净的方式，使用 UJS。我查看了一些 ajax:callbacks，但我不知道如何将数据添加到请求中。

我正在为 JS 使用咖啡脚本。此代码是创建任务的更大表单的一部分。任务 has_many 请求者。此代码将根据在文本字段中输入的电子邮件地址填充请求者列表。提交表单会将请求者链接到任务。这就是为什么我不能在表单中使用表单的原因。

【问题讨论】：

stackoverflow 提示：要将文本格式化为代码块，请选择相关文本并按 ctrl+k（或在代码块的每一行前添加 4 个空格）。如果您想要“内联”代码，请使用反引号 `
您是否有不想使用表单的原因？
@MrYoshiji 谢谢。我尝试了 4 个空格，但它不喜欢 div 所以我决定使用代码语法。我不知道 ctrl+k
创建你自己的 ajax 请求，如果插件文档没有提供足够的支持，任务就很简单
@charlietfl 100% 正确。这是一种有效的方法。很高兴知道如何以其他方式进行操作。

标签： jquery ruby-on-rails ajax ujs

【解决方案1】：

根据 charlietfl 的建议，我查看了 UJS 源代码（最终非常短......）。

我想出了这个解决方案：

您需要在链接上设置 remote: true 才能启用 UJS。

您需要将此代码添加到您的 js/coffee 文件中（代码假定为 DOM 准备好涡轮链接）

ready = -> 
  $("#requester_btn").on "ajax:before", (event, xhr, settings) -> 
    $(this).data('params', $("#requester_field").serialize()) 
    return

$(document).on("page:change", ready)

使用 text_field 的序列化值将 data-params 添加到链接将使 UJS 发挥它的魔力。

【讨论】：