Шаблон AJAX в Rails для отправки небольших порций данных

Question

У меня есть веб-страница с множеством маленьких изображений. В типичном сценарии пользователь нажимает на изображение и ожидает, что оно изменится с новым изображением.

Требования:

1. Когда пользователь нажимает на изображение, оно должно быть немедленно известно контроллеру Ajax.
2. Некоторые строки должны передаваться в контроллер, когда пользователь нажимает на изображение.
3. Контроллер выполняет свою работу и возвращает другое изображение (которое заменяет старое).
4. Вместе с контроллером изображений возвращает пару дополнительных строк (например, статус завершения).
5. Веб-страница обновляет старое изображение новым, а также обновляет другие части с помощью этих новых строк.
6. Количество изображений на странице варьируется, но потенциально это может быть несколько десятков.

Вопрос: Какую технику Ajax следует использовать здесь? Я совсем новичок в Ajax и не чувствую себя уверенно с шаблонами. Это должен быть Джсон или что-то еще?

Любой пример кода будет очень желанным и полезным.

Спасибо.

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

Насколько мне известно, единственный безопасный для браузера способ изменить изображение - это присвоить новый URL-адрес его атрибуту src. Если вы вернете изображение в запрос, который передает некоторые параметры, это может предотвратить кэширование изображений на стороне клиента. По этим причинам я бы отдельно отнесся к передаче текстовых данных и изображений. Статус завершения всегда можно вернуть в виде текста статуса HTTP, но если от сервера требуется дополнительная информация, вы всегда можете вернуть его в формате JSON или XML, самым простым из которых является JSON. Отзывчивость может быть улучшена путем предварительной загрузки изображений при наведении курсора мыши.