首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将工作中的Rails表单转换为AJAX

问将工作中的Rails表单转换为AJAX
EN

Stack Overflow用户
提问于 2015-12-01 21:19:42
回答 1查看 259关注 0票数 1

我有一个运行良好的Rails表单,该表单当前发布我的结果,并将用户重定向到另一个视图并发布结果。流动情况如下:

代码语言:javascript
复制
views/tools/index.html.erb -> views/tools/ping.html.erb

由于我现在已经开始工作,所以我希望将其转换为AJAX,并将用户保留在views/tools/index.html.erb视图中,从而摆脱重定向以增强用户体验。但是,我不知道如何根据我的Tools控制器当前的设置方式,以及我对AJAX极其缺乏的知识进行操作。

所以,我现在要说的是:

视图/工具/index.html.erb(添加“远程:真”以形成)

​

代码语言:javascript
复制
<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

​

代码语言:javascript
复制
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

​

代码语言:javascript
复制
<%= @results %>

​

视图/工具/ping.js.erb(基于建议的新文件)

​

代码语言:javascript
复制
$("#output").html("<%= @results %>");

​

routes.rb

​

代码语言:javascript
复制
Rails.application.routes.draw do
  root 'tools#index'

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

​

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

​

因此,我现在知道的是,我需要将remote: true添加到表单中,这就是我迷路的地方。

似乎我有一个问题,那就是我抽象出了在Tools控制器中使用我的Tools方法的形式,而我所读过的所有教程(和栏杆)都是关于CRUD方法和给定模型的AJAX,而不是像我在这里构建的那样。请帮我理解AJAX!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-01 21:35:17

您在正确的轨道上,现在您需要用一个def ping块修改respond_to操作。

代码语言:javascript
复制
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。

代码语言:javascript
复制
$("#output").html("<%= j @results %>"); 

将首先对<%= %>块进行评估,并将其替换为红宝石代码的输出。然后将其插入到#output div中。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34030385

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档