ajax请求后渲染部分答案

【问题标题】：Render partial after ajax requestajax请求后渲染部分
【发布时间】：2022-08-19 18:24:49
【问题描述】：

我正在创建一个表单，如果用户输入一个 URL，我的代码将返回一个图像 url。结果成功后，我想更新显示图像的部分而不重新加载页面

在我的控制器中

  def receive_url
    img_path = ProcessUrl.new.parse_url(params[:submitted_url])
  end

在我看来

<div>
  <%= form_tag({controller: \"get_url\", action: \"receive_url\"}, method: :post, remote: true) do %>
    <%= label_tag \"Enter Url\" %>
    <%= text_field_tag \"submitted_url\", nil, placeholder: \'Enter search url...\'%>
    <%= button_tag \"Publish\", class: \'button\', data: { disable_with: \"Please wait..\" } %>
  <% end %>
</div>

<%= render :partial => \'image\', locals: { stored_url: @stored_url } %>

在我的部分 _image.html.erb

<div>
  <% if @stored_url != nil %>
    <a href=\"<%= @stored_url %>\" > 
      <div id=\"background_image\" style=\"height: 300px; width: auto; background-image: url(<%= @stored_url %>); background-repeat: no-repeat\"></div>
    </a>
  <% end %>
</div>

我需要在控制器中做什么才能传入@stored_url

请告诉我们您拥有的 Rails 版本。因为使用 Rails 7 Turbo 很容易做到。如果您的 Rails 应用程序较旧，您打算使用 Jquery 还是 Javascript？另外，当您在视图中传递本地 stored_url 时，为什么您的局部变量有一个实例变量 @stored_url ？

标签： ruby-on-rails ruby ajax

【解决方案1】：

对于这个答案，我假设您的路线设置正确。

<%= render :partial => 'image', locals: { stored_url: @stored_url } %>

您视图中的上述行只会在页面加载时呈现。要在提交到receive_url 端点的链接后更新它，我们必须使用一些javascript。在传统的 Rails 方式中，这是由 *.js.erb 文件处理的。

在我们这样做之前，让我们稍微调整一下视图和局部：

<div>
  <%= form_tag({controller: "get_url", action: "receive_url"}, method: :post, remote: true) do %>
    <%= label_tag "Enter Url" %>
    <%= text_field_tag "submitted_url", nil, placeholder: 'Enter search url...'%>
    <%= button_tag "Publish", class: 'button', data: { disable_with: "Please wait.." } %>
  <% end %>
</div>

<div id="image_section">
<%= render :partial => 'image', locals: { stored_url: @stored_url } %>
</div>

视图已更新，因此我们有一个 div 和 id。我们可以使用该 id 作为 js.erb 文件的参考来更新视图。

  <% if @stored_url != nil %>
    <a href="<%= @stored_url %>" > 
      <div id="background_image" style="height: 300px; width: auto; background-image: url(<%= @stored_url %>); background-repeat: no-repeat"></div>
    </a>
  <% end %>

在部分中，我们只是去掉了div 标签，因为它现在出现在视图中。

我们的控制器也需要调整。我们想告诉 rails 我们将使用一些 javascript (js.erb) 来接听电话，并且我们希望在我们的部分中使用变量 @stored_url：

    def receive_url
      img_path = ProcessUrl.new.parse_url(params[:submitted_url])

      #fill in our stored_url
      @stored_url = <YOUR LOGIC TO GET THE URL>
      #tell rails we would like to respond with js
      respond_to do |format|
        format.js 
      end
    end

最后，我们需要在我们的视图地图中创建一个receive_url.js.erb 文件。在处理我们对receive_url 的请求后，将调用此javascript 函数。请注意，此文件的名称与我们的端点相同。

$("#partial_image_section").html("<%= j (render 'partial_image') %>");

它执行以下操作：首先，它搜索id 等于partial_image_section 的元素。其次，它将其内部 html 替换为 render 'partial_image'。 render 函数将重新渲染我们的局部图像，从而生成一个新图像。

【讨论】：