javascript - 将工作的 Ruby on Rails 表单转换为 AJAX

Question

我有一个工作的 Ruby on Rails 表单，它当前发布我的结果并将用户重定向到另一个 View 并发布结果。流程是:

views/tools/index.html.erb -> views/tools/ping.html.erb

因为我现在可以使用它，所以我想将它转换为 AJAX 并让用户保持在 views/tools/index.html.erb View 中，摆脱重定向以增强用户体验。但是，我不确定如何根据我的 Tools Controller 当前设置的方式进行操作，而且我对 AJAX 的知识非常缺乏。

所以，这是我目前拥有的:

views/tools/index.html.erb(在表单中添加了“remote: true”)

<h1> Tools </h1>

<h3> Ping </h3>

<%= form_tag ping_tool_path(1), method: "post", remote: true do %>
  <%= text_field_tag :ip, params[:ip] %>
  <%= submit_tag "Ping", name: nil %>
<% end %>

<!-- this is where I'd like to put the results via AJAX -->
<div id="output"></div>

controllers/tools_controller.rb

class ToolsController < ApplicationController

  def index
    
  end

  def ping
    ping_host(params[:ip])
    save_host(params[:ip])

    # Adds based on recommendations
    respond_to do |format|
     format.html { redirect_to tools_path }
     format.js
    end
  end


  protected

    def ping_host(host)
      f = IO.popen("ping -c 3 #{host}")
      @output = f.readlines

      tool_type = "ping"
      tool = Tool.find_by(tool_type: tool_type)
      tool.increment(:tool_hit_count, by = 1)
      tool.save

      @results = "<pre>#{@output.join}</pre>".html_safe
    end

    def save_host(host)
      host = Host.find_or_create_by(host_ip: host)
      host.increment(:host_hitcount, by = 1)
      host.save
    end
end

views/tools/ping.html.erb

<%= @results %>

views/tools/ping.js.erb(基于建议的新文件)

$("#output").html("<%= @results %>");

routes.rb

Rails.application.routes.draw do
  root 'tools#index'

  resources :tools do
    member do
      post 'ping'
    end
  end
end

这是我在提交表单后在 Google Chrome 的“网络”选项卡上看到的:

所以，我现在知道的是，我需要将 remote: true 添加到我在 views/tools/index.html 中的表单中.erb，这就是我迷路的地方。

似乎我有一个 ATM 问题，因为我已经抽象了表单以在 Tools Controller 中使用我的 ping 方法，而所有教程(和 railscasts)我经历过的是在 CRUD 方法和给定模型上执行 AJAX，而不是我到目前为止在这里构建的东西。 请帮助我理解 AJAX!

Answer 1

您的方向是正确的，现在您需要使用 respond_to block 修改 def ping 操作。

def ping
  ping_host(params[:ip])
  save_host(params[:ip])

  respond_to do |format|
    format.html { redirect_to tools_path } ## if you still want to have html
    format.js
  end
end

并创建一个名为 view/tools/ping.js.erb 的文件，其中包含将异步运行和返回的 javascript

$("#output").html("<%= j @results %>"); 

<%= %> block 将首先被评估并替换为该 ruby​​ 代码的输出。然后将其插入#output div。