使用xmlhttprequest用ajax onclick導軌更新div

Question

我將其用作可食用的寶石，並在評論中實施了投票系統。 現在，我希望頁面在用戶單擊upvote或downvote鏈接並更新投票計數器時停止重新加載。 我想用這個

<script>
function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","URL_HERE",true);
  xmlhttp.send();
}
</script>

我的_comment.html.erb

<%= div_for comment do %>
    <p>
            <div style="float: left; text-align: center; margin-right: 20px;" class="comment">
                <% if user_signed_in? %>
                    <% if current_user.voted_for? comment %>
                        <%= link_to image_tag("updis.png", {:style => 'width: 30px'}), like_post_comment_path(@post, comment), method: :put, :disabled => 'disabled' %><br />
                        <% if comment.likes.size > comment.dislikes.size %> 
                            +<%= comment.likes.size-comment.dislikes.size %><br />
                        <% elsif comment.likes.size < comment.dislikes.size %>
                            <%= comment.likes.size-comment.dislikes.size %><br />
                        <% else %>
                            <%= comment.likes.size-comment.dislikes.size %><br />
                        <% end %>
                        <%= link_to image_tag("downdis.png", {:style => 'width: 30px'}), dislike_post_comment_path(@post, comment), method: :put, :disabled => 'disabled' %>
                    <% else %>
                        <%= link_to image_tag("upvote.png", {:style => 'width: 30px'}), like_post_comment_path(@post, comment), method: :put %><br />
                        <% if comment.likes.size > comment.dislikes.size %> 
                            +<%= comment.likes.size-comment.dislikes.size %><br />
                        <% elsif comment.likes.size < comment.dislikes.size %>
                            <%= comment.likes.size-comment.dislikes.size %><br />
                        <% else %>
                            <%= comment.likes.size-comment.dislikes.size %><br />
                        <% end %>
                        <%= link_to image_tag("downvote.png", {:style => 'width: 30px'}), dislike_post_comment_path(@post, comment), method: :put %>
                    <% end %>
                <% else %>
                    <%= link_to image_tag("updis.png", {:style => 'width: 30px'}), like_post_comment_path(@post, comment), method: :put, :disabled => 'disabled' %><br />
                    <% if comment.likes.size > comment.dislikes.size %> 
                        +<%= comment.likes.size-comment.dislikes.size %><br />
                    <% elsif comment.likes.size < comment.dislikes.size || comment.votes.size == 0 %>
                        <%= comment.likes.size-comment.dislikes.size %><br />
                    <% else %>
                        <%= comment.likes.size-comment.dislikes.size %><br />
                    <% end %>
                    <%= link_to image_tag("downdis.png", {:style => 'width: 30px'}), dislike_post_comment_path(@post, comment), method: :put, :disabled => 'disabled' %>
                <% end %>
            </div>
            <div style="float: left; margin-right: 20px;">
                <%= image_tag avatar_url(comment.user), class: 'profile-picture' %>
            </div>
            <strong>
                    <%= time_ago_in_words(comment.created_at).capitalize %> আগে <%= link_to comment.user.name, comment.user %> বলেছেন,
            </strong>
            <p>
                <%= comment.body %><br/><br />
            </p>
    </p>
    <hr />
<% end %>

我不知道在這一行中應該使用哪個URL

xmlhttp.open("GET","URL_HERE",true);

誰能告訴我該怎么做。

Answer 1

通過簡單得多的$.ajax實現或內置的rails unobtrusive ajax可以輕松簡化xhr使用：

我將說明如何使用標准$.ajax獲得所需的內容（將顯示其工作原理）：

---

$ .ajax

#app/assets/javascripts/application.js
$("#vote_button").on("click", function() {

    $.ajax({
        url: "your/vote/url",
        data: {data: "info"},
        success: function(data) { alert(data) }
        error: function(data) { alert(data) }
    });

});

要直接回答您的問題，必須將您使用的url發送到觸發表決操作的controller方法

我對這個特殊的寶石沒有任何經驗，但是我將詳細介紹如何手動創建此功能以使您有所了解：

---

路線

#config/routes.rb
resources :pictures do 
    get :vote_up
    get :vote_down
end

---

控制者

#app/controllers/pictures_controller.rb
def vote_up
    @picture = Picture.find(params[:id])
    #create "up" vote here

    respond_to do |format|
        format.js #loads vote_up.js.erb
    end
end

def vote_down
    @picture = Picture.find(params[:id])
    #create "down" vote here

    respond_to do |format|
        format.js #loads vote_down.js.erb
    end
end

---

DIV

您可以通過在.js.erb文件或ajax success函數中部署代碼來更新渲染的DIV。