javascript - Ajax on Rails 如何使用 Ajax append 方法呈现 HTML？

Question

我不会说英语。我请求你的理解。抱歉

/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 是什么意思 我只是复制并粘贴到谷歌。 我不太确定这是否正确。 我对么？

Answer 1

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

Rails 链接带有内置函数，可以像这样发送 ajax 请求:

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

“remote: true”选项会为您向指定路径(在本例中为新帖子)发送对该链接的 ajax 请求。

您的 Controller 接收每个请求并通过重定向或呈现刷新页面的 View 来响应。但是，当您执行 ajax 请求时，您不希望这样。您想要的是您的 Controller 也通过 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 文件响应。

在您的 View 文件夹中，您现在需要为您的 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 %>');

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

我建议您观看这 2 个 youtube 视频:

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

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