ajax - Rails 表单，加载新记录页面而不是重定向到它

Question

我在 Rails 中创建我的第一个应用程序。基本上，我有一个新客户表格，通常当您输入新客户时，您会被重定向到您创建的记录。

但是，当我通过 ajax 加载所有页面时，我想加载新记录而不是重定向到它。

我已经通过 ajax 触发了表单，我只需要知道如何访问新记录 URL 以将其加载到我的容器中。

希望这是有道理的。提前致谢！

score 0 · Accepted Answer

您可以在 form_for 辅助方法中添加一个选项 :remote => true ，以便通过 ajax 发布表单而不是页面重定向。例如：

<%= form_for(@post, :remote => true) do |f| %>
  ...
<% end %>

然后创建一个名为 create.js.erb 的新模板，该模板将在执行 create 方法后呈现。

在此模板中，您可以显示您创建的新记录的详细信息。

例如：

$('some_element').replaceWith('<%=@posts.name %>');

score 0 · Accepted Answer

编辑：您提到在您的 javascript 中使用负载。我通常会避免这种情况，因为您要对服务器进行两次往返。1) 创建 2) 获取要加载到 div 的 html。此外，如果发生错误，无论是什么，都将更难捕捉并做“好事”。

将 remote: true 选项添加到表单后，您需要处理服务器端发生的事情。

假设您使用 REST，您将拥有一个控制器，其中包含一个创建操作。通常，此方法创建项目，然后返回创建页面的 HTML。取而代之的是，我们需要为操作创建一个 javascript 视图。这将告诉调用页面当这个动作被击中时要做什么。

假设您的表单有一个名为“new_record_form”的 div，并且您还有另一个名为“new_records”的 div。您需要清空表单中的表单元素，从而有效地重置它。您还需要将新记录添加到“new_records”div。

要将记录添加到新记录 div，您可以执行以下操作。

$("#new_records").append("#{@new_record.name}");

当您提交表单时，您应该会看到添加的内容。调试问题的一种好方法是使用检查器。如果您使用的是 chrome，请右键单击任意位置，检查元素并选择网络。在提交表单之前执行此操作。您将能够看到 ajax 调用和响应。您的日志也会有所帮助。

不要忘记也将表格填空。

注意：您提到您的所有页面都是 ajax，但由于产生的各种问题，我强烈建议您评估这是否 100% 有意义。并不是说这是关于该主题的最佳文章，但可能值得一读。

2 回答 2