在我刷新整个页面（ajax）之前，Rails 部分不会重新加载

Question

<div class="row" style="margin: 0 auto; max-width: 1000px; display: block;">
  <div class="col-md-12" style="margin-top: 50px; margin-left: 25px; margin-bottom: 20px;">
    <div class="row">
      <%= @reviews.count %> Reviews
    </div>
  </div>
  <div class="card-columns">
    <%= render(:partial => 'reviews') %>
  </div>
</div>

<div class="button">
  View More
<div>

<style>
@media only screen and (min-width: 570px) {
  .col-md-4 {
    display: inline-block;
  }
}
</style>

<script>
  $('.button').click(function(){
    $.ajax({
      type: "GET",
      url: "https://58a109ea.ngrok.io/shop/1?product_id=1259405967417",
      data: {
        offset: 2
      },
      success: function (result) {
        $('.card-columns').html(`<%= render partial: 'reviews' %>`);
      },
      error: function (result, err) {
        console.log(err);
      }
    });
  });
</script>

我的显示视图中有上述代码。当单击“查看更多”按钮时，我需要它向控制器发送一个参数并在活动记录调用中使用该参数以更改显示项目的限制。

这是在 ajax 调用后接收参数的控制器：

class ShopController < ApplicationController
  def show
    if request.env["HTTP_ORIGIN"]
      request_domain = request.env["HTTP_ORIGIN"]
      request_domain.slice!(0, 8)
      shopify_store_id = Shop.find_by(shopify_domain: "#{request_domain}").id
      render json: shopify_store_id
    end
    if params[:offset] != '' && params[:offset] != nil
      session[:offset] = params[:offset]
    end
    @reviews = Review.where(product_id: params[:product_id]).limit(session[:offset])
  end
end

如果我使用 puts 语句，我可以看到参数正在传入，但由于某种原因，在我刷新页面之前视图中没有任何变化。有人对我可以尝试什么有任何想法吗？

Answer 1

<%= render partial: 'reviews' %> ERB 模板仅在服务器上处理，您的浏览器无法识别 ERB 标签。 一种方法是在您的操作中使用render_to_string 对您的HTML 响应进行字符串化，以将其作为JSON 响应发送回您的AJAX 调用

你可以在你的控制器上做这样的事情

def show
  @product = Product.find_by_product_id(params[:product_id])

  respond_to do |format|
    if @product.reviews
      tmp_response = { :reviews => render_to_string('shops/_reviews', :layout => false, :locals => { :product => @product }) }
      format.json{ render :json => tmp_response }
    else
      tmp_response = { :reviews => "<div>Nothing found!</div>" }
      format.json{ render :json => tmp_response }
    end
  end
end

然后在您的 AJAX 调用中，向 dataType: 'JSON' 发出 AJAX 请求，并将字符串响应解析为 html 并将其呈现在您的 DOM 上。

$('.button').click(function(){
  $.ajax({
    type: "GET",
    dataType: 'json',      
    url: "https://58a109ea.ngrok.io/shop/1?product_id=1259405967417",
    data: {
      offset: 2
    },
    success: function (result) {
      _html = $.parseHTML(result['reviews']);
      $('#reviews').html(_html);       
    },
    error: function (result, err) {
      console.log(err);
    }
  });
});

Answer 2

在ShopController的类定义下的行添加respond_to :html, :js