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

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

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

2 个答案: