Ajax 上 Rails 如何使用 Ajax 附加方法渲染 HTML？

Question

我不是英国人speaker.I问你understanding.sorry

/app/views/sale/index.html.erb
我想在这里 ajax

<div class="col-lg-4" style="padding:5px;" id=reply_preview>

      <%= render 'sale/billpreview'%>

</div>

这是发送数据的按钮

<button type="submit" class="btn btn-defalut reply_sale" value="<%= m.id %>" name="menuid"

脚本

<script>
$(".reply_sale").click(function(){

    send_value=this.value;

  $.ajax({
    method: "POST",
    url: "/sale/billpreview",
    data: { menuid : send_value },
    dataType : 'json'
  })
  .done(function() {
  $( "#reply_preview" ).append( "<%= render 'sale/billpreview'%>");// <-- error point
  });

 });
</script>

这里是错误点

$( "#reply_preview" ).append( "<%= render 'sale/billpreview'%>");// <-- error point

我在这里输入什么？

/app/views/sale/_billpreview.erb

<div style="background-color:white; height:410px;">
  <div style="padding:15px;">
    <div style="color:black">
      <h4>order list</h4>
      <div>=================================</div>
      <div style="height:250px; margin-left:1px; margin-right:1px;">
        <div class="row" style="font-size:14px; height:200px;">
          <% @total_price = 0 %>
          <% if current_user.store.billopen %>
            <% if @billshow.present? %>
              <% @billshow.salesmenu.each do |m|%>

                <span class="col-lg-4"><%= m.menu.name %></span>
                <span class="col-lg-4"><%= m.menu.price * m.qty %></span>
                <span class="col-lg-4">
                  <form action="/sale/qty_plus" method = "post">
                    <button type="submit" class="glyphicon glyphicon-plus" name = "qty" value ="<%=m.id%>"> </button>
                  </form>
                  <span><%= m.qty %></span>
                  <form action="/sale/qty_minus" method = "post">
                    <button type="submit" class="glyphicon glyphicon-minus" name ="qty" value ="<%=m.id%>"> </button>
                  </form>
                </span>
                <% @total_price = @total_price + (m.menu.price * m.qty) %>
              <% end %>
            <% else %>
            <% end %>
          <% else %>
          <% end %>

        </div>
        <div>--------------------------------------------------------</div>

        <div class="row">
          <span class="col-lg-4">total price</span>
          <span class="col-lg-8" style="text-align:right"><%= @total_price %> </span>
        </div>
      </div>
      <div>=================================</div>
    </div>

    <div class="row" style="margin-top:15px;">

      <form class="col-lg-4" action="/sale/billfinish" method = "post">
        <button type="submit" formmethod="post" formaction="/sale/billfinish" class="btn btn-default">완료</button>
      </form>
      <form class="col-lg-4">
        <button type="submit" onclick="location.href='/sale/index'" class="btn btn-default">Initialization</button>
      </form>
      <form class="col-lg-4">
        <button type="submit" onclick="location.href='/home/index'" class="btn btn-default">cancel</button>
      </form>

    </div>
  </div>
</div>

/app/controllers/home_controller.rb

def billpreview

    if current_user.store.billopen

      @salesmenu = Salesmenu.new
      @salesmenu.menu_id = params[:menuid]
      @salesmenu.bill_id = current_user.store.bills.last.id
      @salesmenu.save

      @billshow = current_user.store.bills.last

    else #
      @bill = Bill.new
      @bill.store_id = current_user.store.id #db connect (bill <-> store)
      @bill.workperiod_id = current_user.store.workperiod.last.id #db connect (bill <-> workpeiod)
      @bill.save


      @salesmenu = Salesmenu.new
      @salesmenu.menu_id = params[:menuid]
      @salesmenu.bill_id = @bill.id
      @salesmenu.qty = 1 

      @salesmenu.save

      @billshow = @bill #current_user.store.bills.last
    end

    @temp_store = current_user.store 
    @temp_store.billopen = true
    @temp_store.save 

return head :no_content
    #redirect_to :back
  end

另外，我不知道return head :no_content是什么意思我只是复制并粘贴到 google。我不太确定这是否正确。我对么？

Answer 1

一些你应该知道并且在你继续学习的过程中必须学习的事情：

Rails links 带有内置函数来发送 ajax 请求，如下所示：

<%= link_to "My ajax request text", post_new(@post), remote: true %>

"remote: true" 选项为您发送一个 ajax 请求 link 到指定的路径（在本例中是一个新的 post）。

您的控制器接收每个请求并通过重定向或呈现刷新页面的视图来响应。但是，当您执行 ajax 请求时，您不希望这样。你想要的是你的控制器也通过 Ajax 响应。再一次，Rails 有一个内置函数可以做到这一点：

def billpreview
# write all your logic and set instance variables for the objects you want
# @salesmenu
respond_to do |format|
          format.html
          format.js
        end
end

respond_to 查看您的请求并确定它是 HTML 请求（否 Ajax）还是 Ajax 请求。如果它是一个 Ajax 请求，它会响应一个 Javascript 文件，否则它会响应一个 HTML 文件，这是默认情况下所做的。

在您的视图文件夹中，您现在需要为您的 javascript 文件创建一个新文件，当您执行 Ajax 请求时，Rails 可以发送该文件：

billpreview.html.erb
billpreview.js.erb

billpreview.html.erb 是您到目前为止一直在使用的。 billpreview.js.erb 是您请求 Ajax 响应时将使用的内容。

在 billpreview.js.erb 中，您可以使用在 billpreview.html.erb 中使用的相同实例变量。

#billpreview.js.erb
$('#id_in_your_view').append('<%= j render @salesmenu %>');

通常您会在您的视图中选择一个 ID ($('#id_in_your_view'))，您可以将您的内容附加到该 ID。您将不得不使用 <%= j render @salesmenu %> 而不仅仅是 "render"，因为您正在使用 javascript。一旦你理解了它背后的逻辑，它就会变得非常容易。祝你好运。

我推荐您观看这 2 个 youtube 视频：

https://www.youtube.com/watch?v=FBxVN7U1Qsk

https://www.youtube.com/watch?v=2Il7PPhen3o

Ajax 上 Rails 如何使用 Ajax 附加方法渲染 HTML？

Ajax on Rails How to use Ajax append method for render HTML?

javascript

ruby

ajax

jquery

ruby-on-rails