在 Rails 3、jQuery 中通过轮询进行 Ajax 部分刷新答案

【问题标题】：Ajax Partial Refresh by Polling in Rails 3, jQuery在 Rails 3、jQuery 中通过轮询进行 Ajax 部分刷新
【发布时间】：2015-11-30 14:06:48
【问题描述】：

Rails 3，JRuby

我最近参加了一个 jQuery 速成课程，其中包括一些 ajax 部分渲染。这让我开始思考，我是否可以使用它来使用 setInterval() 轮询 Rails 服务器，每 x 秒不断刷新页面的特定部分？

我遇到的问题是如何使用$.get() 方法获取部分的url 并使用load() 重新加载它。这就是混乱开始的地方 - 使用 Rails 3，我有一个名为“_microposts”的部分，在一个带有 'id="gf"' 的 div 中呈现（gf 表示全局提要）。这发生在我的 Rails 应用程序主页上，因此在这种情况下的 url 将是“//localhost:8080/home”，而不是部分的 url。

这是我最初的 javascript/jQuery

<script>
    $(document).ready(function() {      
        setInterval(function (e) {
            var url = $.get("<%= escape_javascript render :partial =>
               'microposts/micropost', :locals => {:microposts => @microposts }%>");

            $('#gf').html('loading...').load(url);          
        },10000);
    }); 
</script>

这看起来不对，到目前为止，只是在 10 秒后将我的 _microposts 部分清空（因此 setInterval 正在工作，它肯定会更新正确的区域，只是有一个空格！）

编辑： 考虑到我的问题，我意识到这类似于从事件中更新部分内容，例如单击按钮或其他内容。唯一真正的区别是应该触发setInterval() 函数的“事件”。所以，我修改后的 jQuery 代码如下：

<script>
    $(document).ready(function() {
        setInterval(function (e) {
            $('#gf').html("<%= escape_javascript render :partial =>
                'microposts/micropost', :locals => {:microposts => @microposts } %>")}, 
            10000);
    }); 
</script>

不幸的是，从用户的角度来看，似乎什么都没有发生，但服务器每 10 秒显示一个 ajax 请求。

那么为什么我不能使用 ajax 轮询更新，并将更改应用到我的 _microposts 部分？ $.get 在这种情况下使用正确的功能吗？尝试重新加载部分时，load() 方法的 url 是什么？

谢谢，

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax polling

【解决方案1】：

希望这将帮助任何想要使用 ajax 刷新部分内容的人 - 特别是如果您是按照 Michael Hartl 的教程学习 Ruby on Rails 的初学者。这是我设法解决问题的方法。

首先，我在 micropost 视图文件夹中创建了一个单独的 .js.erb 文件，名为“polling.js.erb”，它将刷新全局提要部分。

$('#gf').html("<%= escape_javascript render :partial =>
                            'microposts/micropost', :locals => {:microposts => @mps} %>");

我需要在 micropost 控制器中编写一个与上述 javascript 对应的方法——这实质上提供了刷新部分所需的信息。它基本上是我在 micropost 控制器中的 index 方法的简化版本，并避免执行我想要刷新的部分不需要的附加代码。

def polling
    @mps = Micropost.all #add some paginate code if you wish
    @micropost = current_user.microposts.build(params[:micropost])                  
end

然后我修改了我的 javascript 代码，因为我想每 5 秒调用一次轮询方法，加载特定于我的 webapp 的 current_user 的信息。

$(document).ready(function() {
    setInterval(function () {
            $.ajax('microposts/<%= current_user.id %>/polling');
    } , 5000);          
});

最后，我更新了我的 routes.rb 文件，以允许 Web 浏览器使用 get 请求调用我的轮询方法，而不会导致路由错误。我正在使用 member do 块，因为请求正在通过请求传递 current_user id。

resources :microposts do
    member do
        post :polling
    end
end

【讨论】：