如何使用 js.erb 响应 fetch(post)？

Question

我正在尝试发出一个 post 请求，该请求将获取所有事件 (Jam) 并通过 ajax 动态更新页面。所以我的控制器接收 JSON 格式的参数，我想用 js 来响应，就像你在 link 或按钮上使用 remote: true 一样。

我正在使用 rails 6.0.2.2

这在我的 .js 文件中 =>

const getJams = () => {
  const mapCenter = map.getCenter();
  const mapBounds = map.getBounds();
  const token = document.getElementsByName("csrf-token")[0].content
  fetch(window.location.origin + "/search", {
    method: "POST",
    headers: {
      'Accept': "text/javascript",
      'Content-Type': "application/javascript",
      'X-CSRF-Token': token
    },
    body: JSON.stringify({
      map_center: mapCenter,
      max_lat: mapBounds._ne.lat,
      min_lat: mapBounds._sw.lat,
      max_lng: mapBounds._ne.lng,
      min_lng: mapBounds._sw.lng
    }),
    credentials: "same-origin"
  })
}

发送数据的搜索控制器中的方法是这样=>

def index
    @jams = policy_scope(Jam)

    respond_to do |f|
      f.json do |f|
        render json: {
          jams: render_to_string(
            partial: 'jams/jams',
            formats: :html,
            layout: false,
            locals: { jams: @jams }
          )
        }
      end
    end
  end

像这样执行，在我的 byebug 中存在参数，所以这似乎是正确的。如果我继续，我的服务器会显示这个

Completed 406 Not Acceptable in 1ms (ActiveRecord: 0.0ms | Allocations: 889)



ActionController::UnknownFormat (ActionController::UnknownFormat):

app/controllers/searchs_controller.rb:7:in `index'

我想在 search.js.erb 文件中工作以将元素附加到我的视图中。虽然，我的 search.js.erb 只包含 console.log("a"); 但那个 js 似乎没有被执行。控制台中没有显示任何内容。

如果有人能帮助我，我将不胜感激。

这里是jams/_jam.html.erb部分的内部=>

<% jams.each do |jam| %>
<div class="jam-card">
  <%= image_tag jam.photo %>
  <%= jam.status %>
  <%= jam.user.first_name %>
  <%= jam.music_style.music_style %>
  <%= display_date(jam.start_date_time, jam.duration) %>
  <%= jam.participants.count %>/<%= jam.max_participants %>
</div>
<% end %>

Answer 1

提示。您不需要 js.erb 个模板。

他们把流程搞得一团糟。当您到达 js.erb 模板时，您现在在 Ruby 和 JavaScript 以及每一行的服务器端和客户端之间进行上下文切换。这种心理体操不会促进高质量的代码。
js.erb 模板不由资产 pipe/webpacker 提供，因此不缩小或由 CDN 提供。
您知道您精心制作的 restful 服务器端应用程序吗？跟它说再见吧，因为它现在负责客户端转换，并且充满了摇摆不定的路线和意大利面条代码 javascript 视图。

要么使用 JSON 对象数组响应请求并让客户端处理模板，要么在 JSON 响应中返回一个 HTML 字符串并让您的真实 ajax 处理程序实际上完成了它的工作：

def index
  @jams = policy_scope(Jam)
  respond_to do |f|
    f.json do 
      render json: { 
        jams: render_to_string(
          partial: 'jams/jams', 
          formats: :html, 
          layout: false, 
          locals: { jams: @jams}
        )
     }
    end
  end
end

.then(function(response) {
  document.getElementById("some_element").innerHTML = response;
})

还有一些方法，人们使用 request.xhr 发回 HTML 块以响应 HTML ajax 请求或使用自定义内容类型。都比js.erb.

好

如何使用 js.erb 响应 fetch(post)？

How to respond to a fetch(post) with js.erb?

javascript

ajax

ruby-on-rails

fetch

ruby-on-rails-6