Question

背景（与@TomLord对应后更改）：

我正在构建一个仅包含索引页面而没有子页面的简单站点。索引页面具有一个“搜索”字段，该字段接受输入（id）并将GET请求发送到在后台运行的RESTful API。 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

在“正常”铁路站点中，搜索表单的工作方式如下-

您可以在视图中定义一个表单。默认情况下，这会将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显示该数据。

但是，上述方法是当前设计中最“最小”的更改-无需添加其他设计模式，您可以将大多数现有haml / erb模板保留原样，只需添加一些代码即可部分显示结果。

Rails / AJAX：部分不显示？

1 个答案: