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

Question

Rails 3、JRuby

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

我遇到的问题是如何使用 $.get() 方法获取部分的 url 并使用 load() 重新加载它。这就是困惑开始的地方——使用 Rails 3，我有一个名为“_microposts”的部分，在带有“id="gf"”(gf 表示全局提要)的 div 中呈现。这发生在我的 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>

不幸的是，从用户的 Angular 来看似乎没有发生任何事情，但服务器每 10 秒显示一个 ajax 请求。

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

谢谢，

Answer 1

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

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

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

我需要在微博 Controller 中编写一个与上述 javascript 相对应的方法——这基本上提供了刷新局部所需的信息。它基本上是微博 Controller 中我的索引方法的简化版本，避免执行我想刷新的部分不需要的额外代码。

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 文件，允许网络浏览器使用 get 请求调用我的轮询方法，而不会导致路由错误。我正在使用 member do block ，因为请求正在通过请求传递 current_user id。

resources :microposts do
    member do
        post :polling
    end
end