Простой пример Rails 3 + UJS, использующего Ajax для удаленного вызова и рендеринга получающегося объекта JSON - PullRequest
Новая
       2

Простой пример Rails 3 + UJS, использующего Ajax для удаленного вызова и рендеринга получающегося объекта JSON

11 голосов
/ 25 апреля 2011

Я пытаюсь добавить некоторые функции Ajax в свое приложение Rails 3.

В частности, я хочу кнопку, которая будет отправлять запрос Ajax для вызова удаленной функции в моем контроллере, который впоследствии запрашивает API и возвращает объект JSON на страницу.

Получив объект JSON, я хочу отобразить содержимое.

И все это с новым подходом Rails 3 UJS. Есть ли где-нибудь хороший пример / учебник для этого онлайн? Я не смог найти его в Google. Простой пример использования кнопки в качестве точки входа (т. Е. Пользователь нажимает кнопку, чтобы начать этот процесс) тоже подойдет.

Редактировать Позвольте мне попробовать это с другим подходом. Я хочу, чтобы эта кнопка запрашивала внешний API, который возвращает JSON, и отображала этот JSON на странице. Я понятия не имею, с чего начать. Сама кнопка запрашивает внешний API? Нужно ли мне проходить через контроллер и запрашивать у контроллера внешний API, получать JSON и возвращать JSON на эту страницу? Как отобразить / получить доступ к содержимому этого JSON? Честно говоря, я не могу найти хороший Rails 3.x пример того, как обрабатывать JSON ...

Ответы [ 3 ]

10 голосов
/ 26 апреля 2011

Вот начало:

Сначала создайте свою кнопку с методом link_to в вашем представлении, например: 

=link_to "delete", "#{invitation_path(invitation)}.json", :method=>:delete, :remote=>true, :class=>"remove", :confirm=>'Are you sure you?'

Обратите внимание, что я добавляю ".json" к URL моего ресурса. Это всего лишь пример удаления AJAX, Google link_to, чтобы увидеть значение параметров. Концепция, если вы делаете HTTP-запрос с параметром: remote, установленным в true, другими словами, это транслируется в вызов AJAX из вашего браузера.

Во-вторых, напишите некоторый javascript, чтобы вы могли обрабатывать то, что когда-либо было результатом вызова AJAX, который ваш браузер сделает, когда пользователь нажмет на link_to шага 1. Для подробностей вы можете увидеть это сообщение в блоге: http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

Пример с моего сайта: 

jQuery(function($) {
  // create a convenient toggleLoading function
  var toggleLoading = function() { $("#loading").toggle() };

  $("#pending_invitation")
    .live("ajax:loading",  toggleLoading)
    .live("ajax:complete", toggleLoading)
    .live("ajax:success", function(event, data, status, xhr) {
       var response = JSON.parse(xhr.responseText)
       if (response.result == "ok") {
          $(this).fadeOut('fast');
       }
       else {
         var errors = $('<div id="error_explanation"/>');
         errors.append('<h2>Pending invitation action error</h2><ul><li>' + response.error + '</li></ul>');
         $('#new_invitation_error').append(errors)   
       }
    });
});

где вы видите, что я анализирую возвращенный json и изменяю HTML на странице, основываясь на этом. Обратите внимание, что этот js использует идентификаторы и классы CCS, определенные в виде сверху, который здесь не включен.

Если вы сейчас хотите написать свой собственный контроллер, чтобы выплевывать json, вот пример: 

class InvitationsController < ApplicationController
  respond_to :html, :json

  # other methods here
  # ...

  def destroy
    @invitation = Invitation.find(params[:id])
    respond_to do |format|
      if @invitation
        @invitation.destroy
        flash[:success] = I18n.t 'invitations.destroy.success'
        format.json { render :json =>{:result => "ok", :message=>"Invitation #{params[:id]} was destroyed", :resource_id=>params[:id] } }
      else
        format.json { render :json => { :result=>"failed", :error=>"Cannot find Invitation #{params[:id]}", :resource_id=>params[:id] } }
      end
    end
  end
end

Надеюсь, эта помощь.

6 голосов
/ 27 января 2012

Старый вопрос, но действительно хороший обзор приложений Ajaxifying Rails:

Ajax в Rails 3.1 - дорожная карта

1 голос
/ 23 марта 2013

Также рассмотрите возможность возврата ошибок в следующем формате: 

render :json => @myobject.to_json, :status => :unprocessable_entity

Это гарантирует, что ваш клиент сможет обработать ответ как ошибку.

...