如何使用 ajax post 请求和 rails 发送表单

Question

我想使用 ajax 和 post 请求发送整个表单输入。我正在使用这段 js 代码：

$.post('#{my_custom_action_path}', $('#myform').serialize(), function(data) {
    console.log("Success !")
});

问题是表单是由 rails 使用包含 "patch" 的“_method”输入生成的这是使用错误路由的结果（它使用了补丁路由，而不是我在路由中定义的post）

如何在通过 ajax 发送表单之前更改 _method 字段？

Answer 1

您正在使用 jQuery ajax $.post shorthand 方法，它是以下简称：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

如果您使用这种较长的形式，很容易将 POST 替换为 PATCH。

Answer 2

您也可以在发送前通过javascript更改输入值：

$("input[name='_method']").val('post');

或者您可以在序列化表单时跳过此字段：

$('#myform').find("input[name!='_method']").serialize()

Answer 3

解决方案是在 Rails 表单生成器上指定 method: post，如下所示：

<%= simple_form_for @model, html: {method: :post} do |form| %>

或者只是 method: post 如果您使用的是 form_for @model。

这是如何工作的：

如果你查看 HTML Rails 生成，你会看到 <form> 标签已经有 method="post"，但正如你所说 Rails生成一个隐藏字段 <input type="hidden" name="_method" value="patch">，当由 Jquery 序列化并通过 AJAX 发送时，将使 Rails 查找 patch 路由而不是 [=18] =] 路线，无论您在 $.axax({}) 设置中的 type 或 method 中设置了什么。

当您在模板中定义 method: post 时，Rails 会将 <form> 保留为 method="post"，但它会避免生成欺骗控制器的隐藏字段标签.

Answer 4

使用$('form').find("[name!='_method']").serialize()

这个将找到未命名为 _method.

的所有表单元素

这不要与 $('#myform').find("input[name!='_method']").serialize() 混淆（如之前建议的答案）。此行将找到所有未命名为 _method 的 input（并且仅 input） 元素。如果您的表单中有其他元素，例如 select 或 textarea 这一行实际上也会将它们剥离。

如何使用 ajax post 请求和 rails 发送表单

How to send form with ajax post request with rails

ajax

jquery

ruby-on-rails

activeadmin