Turbolinks 5 ajax POST答案

【问题标题】：Turbolinks 5 ajax POSTTurbolinks 5 ajax POST
【发布时间】：2017-02-03 21:04:09
【问题描述】：

在我的 Rails 5 / Turbolinks 5 应用程序中，我想将表单提交产生的 html 放入 div 中。

表格是一个

= form_for(user) do |f|

标准导轨形式。

成功提交后，会向浏览器发送重定向

respond_to do |format|
      if @user.save
        format.html { redirect_to @user, notice: 'User was  created.' }

当我通过 ajax 提交表单时：

$(".dialog").on("submit", "form", function(e){
 e.preventDefault();
 $.ajax({
  url: $(this).attr("action"),
  method: "POST",
  data: $(this).serialize()
 }).done(function(data) {
  $(".dialog .canvas").html(data);
 });
});

from 被提交，服务器的 redirect_to 语句将浏览器重定向到新用户的页面。

重定向会导致 turbolink 将正文替换为浏览器重定向到的页面内容。相反，我想替换特定的 div $(".dialog .canvas").html(data)。我怎样才能防止 turbolinks 的这种行为。

【问题讨论】：

你能添加你的控制器代码吗？我的猜测是您不应该重定向，而是呈现对请求的响应。
观看此视频会对您有所帮助。 railscasts.com/episodes/205-unobtrusive-javascript

标签： jquery ruby-on-rails ajax turbolinks-5

【解决方案1】：

如果我理解您正在尝试正确执行的操作，您可以从服务器呈现 HTML 并使用从您的服务器生成的 JavaScript 更新您的 div 元素。

# HTML form
<%= form_for @user, remote: true do |f| %>
  ...
<% end %>

# app/controllers/users_controller.rb
def create
  @user = User.create(user_params)
  # renders create.js.erb automatically with AJAX request (remote: true)
end

# app/views/users/create.js.erb
$("#my-div").html("<%=j render(partial: 'users/user', locals: { user: @user }) %>");

请注意，在您的 js.erb 文件中，您可以使用 Ruby 和 JavaScript；我发现它对于构建 HTML 和动态内容并将其传递回客户端以作为 JavaScript 运行非常有用。

人们可以讨论服务器生成的 JavaScript 的优缺点，但我认为它非常好，而且运行良好。否则你必须保持服务器/客户端模板同步，这真的很麻烦；或者您必须在客户端执行所有模板，并且仅将您的服务器用于 JSON。

我只是不认为将来会以这种方式分解客户端/服务器，尽管有很多人声称这就是一切的发展方向。看看大量涌现的 JavaScript MVC 框架。

【讨论】：

【解决方案2】：

使用 turbolinks 5.0.1，在控制器中添加选项 turbolinks: false 即 format.html { redirect_to @user, notice: 'User was created.', turbolinks: false }

其他解决方案（不太好，因为它不允许您更新到 Rails 5.1）是坚持使用 turbolinks 2.5.3。

使用 format.js 甚至 format.json 可能还有其他解决方案，检查：https://github.com/vtamara/turbolinks_prob50

【讨论】：