javascript - Ajax 与 Ruby on Rails 简单视图刷新

Question

我想知道是否有人可以帮助我解决我在 Rails 中解决 AJAX 的问题。我想尝试做一些简单的事情，我只想不断检查索引视图是否有新条目会在屏幕外发生？

每隔几秒钟就会很酷，因为新条目会淡入淡出？新条目在一个名为 image 的 div 类中，里面是这样的：

<%= image_tag image.image_url(:medium).to_s %>

我已经尝试了一些教程，但有些教程似乎与我想要实现的目标有点过时。我希望有人可以在正确的方向上帮助我。

Answer 1

基本思想是：

1. 您存储以某种 javascript 可访问的方式加载的最新条目，例如在data-属性中
2. 您延迟循环 ajax 调用
3. ajax 调用的响应会在你的 DOM 中产生变化

1

查看（图像/index.html.erb）：

<% render @images %>

查看（图像/_image.html.erb）：

<div class="image" data-id="<%=image.id%>">
  <%= image_tag image.image_url(:medium).to_s %>
</div>

2

Javascript：

function poll(){
  latest_id = $('div.image:first').data('id')
  $.getScript('/images?latest_id='+latest_id)
}

$(function(){setInterval(poll, 5000})

3

控制器：

@images = Image.order('id desc')
@images = @images.where('id > ?', params[:latest_id]) if params[:latest_id]

查看（图像/index.js.erb）：

$('div.image:first').before('<%=j render @images%>').hide().fadeIn()

请注意，我对您的模型名称和路径做了一些假设。您应该根据需要修改路径。

此示例仅用于说明目的，不适合实际应用程序 - 如果服务器超载，javascript 将不断用请求锤击它，或者如果您的初始页面没有初始条目，则插入新条目的方式将中断。