使用 xmlhttprequest 使用 ajax onclick rails 更新 div

Question

我将行为用作可投票的 gem，并在 cmets 中实现了投票系统。现在我希望页面在用户单击 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

您对xhr 的使用可以通过更简单的$.ajax 或内置rails unobtrusive ajax 的实现来轻松简化：

我将解释如何使用标准 $.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 必须发送到触发投票操作的控制器方法

我对这个特定的 gem 没有任何经验，但我会详细说明如何手动创建此功能以提供一个想法：

---

路线

#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

---

分区

您可以通过在.js.erb 文件或ajax success 函数中部署代码来更新您呈现的DIV