Rails/AJAX: 部分不显示？

Question

背景（与@TomLord通信后更改）：

我正在构建一个只有索引页面而没有子页面的简单站点。索引页面有一个 "search" 字段，它接受输入 (id) 并在后台向 RESTful API 运行发送 GET 请求。来自 API 的响应是 JSON {"market price": "4306057.0", "retail price": "4995000.0"}.

我想将此结果与搜索字段一起显示在索引页上。但是，当我按下按钮时，结果没有显示在任何地方。

代码:

index.html.erb

<section id="search">
  <div class="container">
    <%= form_tag({controller: "model_request", action: "result"}, method: "get", remote: true) do %>
      <%= label_tag(:q, "Search for") %>
      <%= text_field_tag(:q, "913384637") %>
      <%= submit_tag("Get the price!") %>
    <% end %>
  </div>
</section>

<section id="display_result">
  <div class="container">
  </div>
</section>

modelrequest_controller.rb 看起来像这样：

class ModelrequestController < ApplicationController

  def result
    id = params['q'].capitalize
    response = RestClient::Request.execute(
      method:  :get,
      url:     "http://0.0.0.0:80/?id=#{id}")
    @result = JSON.parse response

    respond_to do |format|
      format.js {render layout: false}
    end
  end

  end

我的routes.rb

Rails.application.routes.draw do

  root 'index#index'

  match "/modelrequest", to: "modelrequest#result", via: 'get'

end

结果的 javascript 如下所示：

result.js.erb

$("#display_result").html("<%= escape_javascript(render partial: 'modelrequest/result', locals: { result: @result } ) %>");

显示部分内容的简单 _result.html.erb 是

<div id="display_result">
  <%= @result %>
</div>

输出:

Started GET "/model_request?utf8=%E2%9C%93&q=913384637&commit=Get%20the%20price!" for 127.0.0.1 at 2018-12-19 20:55:33 +0100
Processing by ModelRequestController#result as JS
  Parameters: {"utf8"=>"✓", "q"=>"913384637", "commit"=>"Get the price!"}
  Rendering model_request/result.js.erb
  Rendered model_request/_result.html.erb (0.8ms)
  Rendered model_request/result.js.erb (6.8ms)
Completed 200 OK in 383ms (Views: 11.6ms | ActiveRecord: 0.0ms)

Answer 1

在 "normal" rails 站点中，搜索表单的工作方式如下 -

您在视图中定义了一个表单。默认情况下，这会将 POST 数据发送到端点 - 但您也可以通过 GET 请求执行此操作。在您的情况下，您最初选择的是：

form_tag("/search", method: "get")

这会将表单数据同步发送到 GET /search，因此会重新加载整个页面。

这是一件完全正确的事情。但是，您希望 保留在索引页上 - 因此请求需要异步：

form_tag("/search", method: "get", remote: true)

...但是现在，该端点需要做一些不同的事情。它不需要呈现新页面，而是需要部分更新当前页面。

rails 应用程序中的标准方法是按照以下方式做一些事情：

# In the controller action, e.g. SearchController
def show
  @results = # ...

  respond_to do |format|
    format.js {render layout: false}
  end
end

# In the view, e.g. `search/show.js.erb`
$("#display_result").html("<%= escape_javascript(render partial: 'results', locals: { results: @results } ) %>");

# In an HTML partial, e.g. `search/_results.html.erb`
<% results.each do %>
  ...

关键思想是在您的主页上 (index.html.erb?)，您必须有一个容器来显示结果。然后，您只是在该容器内呈现 HTML 更新，而不是呈现新页面。

当然，这不是唯一的方法。现代网站通常会为搜索结果获取 JSON 数据，然后确定如何通过 JavaScript.

显示该数据

但是，上述方法是您当前设计的最大 "minimal" 变化 - 无需添加额外的设计模式，您可以保留现有的大部分 haml/erb按原样模板，只需添加一点代码即可将结果呈现为部分结果。

Rails/AJAX: 部分不显示？

Rails/AJAX: Partial not displaying?

ruby

haml

ruby-on-rails