如何使用 Rails 4 轮询数据库中的一个值，如果值更改，则使用 AJAX 刷新

Question

我已经使用 Rails 几年了，但这是我第一次尝试 AJAX 和 Javascript。我花了很多时间阅读各种网站，试图弄清楚什么去哪里以及它应该做什么。

我试图让 Rails 4 应用程序中 edit.html.erb 中的 'refreshme' div 每次“故事”表中的“转”字段发生变化时都会刷新。所以我在story.js 中写了一个setInterval() 函数来检查@story.turn 和刷新。我可以让它每 10 秒刷新一次，但我只希望代码检查story.turn 每 10 秒的值，并且仅在值发生变化时刷新。

routes.rb（对吗？）

match '/stories/:id/refresh' => "stories#refresh", :as => :story_refresh, via: 'post'

refresh.html.erb（在视图/故事中 - 我不知道这里属于什么）

<div class="pollme" data-story-id="<%=@story.id %>" data-story-turn="<%=@story.turn %>" > 
  <%=@story.turn %> // This gets changed based on what other users are editing
</div>

edit.html.erb (views/stories) - show.html.erb 很好地刷新到这个 div 中

<div class="refreshme" data-story-id="<%=@story.id %>" data-story-turn="<%=@story.turn %>" >
  <%= render 'shared/micropost_form' %>
</div>

故事.js

$(document).on("page:change", function() {
  var $turn;
  $turn = $('.refreshme').data('story-turn'); 

  refreshStories = function(){

    $.ajax({     
        type: "POST",
        data: {  },  // I'm sure something important goes here to get @story.turn out of the stories table
        url: "/stories/"+$('.refreshme').data('story-id')+"/refresh"    
    }).done(function(result) {
            alert('done' );
        $turn = ; // Not sure what data{} can return
    })

    if ($('.refreshme').data('story-turn') != $turn) {
      $.ajax({
        type: "GET", // helps show.html.erb get refreshed into refreshme div in edit.html.erb
        url: "/stories/"+$('.refreshme').data('story-id') 
      }).done(function(result) {
        var $sentence_requests = $('.refreshme');
        if ($sentence_requests.length > 0) {
            $sentence_requests.html(result);
            alert('UPDATED micropost requests ') ;
        } else {
        }
      })
    }
  };
  setInterval(refreshStories, 10000); 
});  

stories_controller.rb

def refresh
  @story = Story.find(params[:id])
  respond_to do |format|
    format.json { }  
    format.html { }
  end  
end

def edit
  @story = Story.find(params[:id])
  @micropost  = @story.microposts.build
  respond_to do |format|
    format.json { } 
    format.html { }
  end  
end

在 story.js 中，GET 函数执行，但 POST 函数不执行。我不确定我应该“发布”什么（我以为我正在从数据库中“获取”一个值，但我猜不是）。

我认为 POST 是我需要从 stories 表中获取 @story.turn 的 AJAX 函数，但不知道如何让它做任何事情。我还需要 GET 来刷新吗？我已经把这段代码混了好几个星期了，这似乎是我现在应该弄清楚的事情。任何帮助将不胜感激。

Answer 1

如果您将它放在公共 github 存储库中，人们可以在上下文中看到您的代码，并且还可以发送拉取请求来展示他们将如何做到这一点。