Rails中的AJAX模式用于提交小块数据

Question

我有一个网页上有很多小图片。在典型情况下，用户单击图像并期望它随新图像而变化。

要求：

1. 当用户点击图像时，应该以Ajax方式立即告知控制器。
2. 当用户点击图片时，应将一些字符串传递给控制器​​。
3. Controller完成其工作并返回另一个图像（替换旧图像）。
4. 与图像控制器一起返回一些额外的字符串（例如完成状态）。
5. 网页使用新图片更新旧图像，并使用这些新字符串更新其他部分。
6. 页面上的图片数量各不相同，但可能只有几十个。

问题：这里应该使用什么Ajax技术？我对Ajax很新，对模式感觉不太稳定。应该是Json还是别的什么？

任何代码示例都非常受欢迎且非常有用。

谢谢。

Answer 1

听起来你需要在图像对象上有一个事件观察者。在该图像对象上，您可以拥有各种自定义属性，例如imageid =“2”等。在单击被观察的元素时，您将读取元素的属性并将它们传递给AJAX调用。我不确定图像是否为数据库所知，或者它是否可以在页面本身上使用。也许后退/上一个按钮？在任何一种情况下，AJAX调用都可以直接返回JavaScript然后被解析以更新DOM并用新的图像源替换图像，或者它可以返回JSON响应，然后需要通过AJAX回调读取和解析然后更新DOM。最简单的方法是返回被解析的JS代码，但我更喜欢将我的所有JavaScript放在一个文件中，而不是将它与服务器端代码混合在一起。

这实际上取决于您使用的AJAX库。

使用jQuery，你可能会做这样的事情。

$（“＃buttonImage”）。click（function（）{

var imageid = $（this）.attr（'imageid'）;

$ .getJSON（“/ controller / get_image /”+ imageid，     功能（数据）{       $（“＃buttonImage”）。attr（“src”，data.imagesrc）;   }）;

}）;

你的/ controller / get_image / 123会返回一个JSON响应，如...

{'imagesrc'：'/ my / image.jpg'}

Answer 2

据我所知，改变图像的唯一浏览器安全方法是为其src属性分配一个新的URL。如果将图像返回到传递某些参数的请求，则可能会阻止客户端兑现图像。出于这些原因，我会单独处理文本数据和图像的传输。 完成状态始终可以作为HTTP状态文本返回，但如果需要从服务器获取更多信息，则始终可以使用JSON或XML返回它，最简单的是JSON。 通过在mouseover事件上预加载图像可以提高响应速度。