2011-04-25 2 views
11

Rails 3 앱에 Ajax 기능을 추가하려고합니다.Rails 3 + UJS에서 Ajax를 사용하여 원격 호출을하고 결과 JSON 객체 렌더링

특히 컨트롤러에서 원격 함수를 호출하기 위해 Ajax 요청을 제출하는 버튼이 필요합니다.이 버튼은 이후에 API를 쿼리하고 JSON 객체를 페이지에 반환합니다.

JSON 개체를 받으면 내용을 표시하고 싶습니다.

이 모든 것이 새로운 Rails 3 UJS 접근 방식에도 적용됩니다. 온라인 어딘가에 좋은 예/튜토리얼이 있습니까? Google에서 하나를 찾을 수 없었습니다. 진입 점으로 버튼을 사용하는 간단한 예 (즉, 사용자가이 과정을 시작하기 위해 버튼을 클릭)도 작동합니다.

편집 다른 방법으로 시도해 보겠습니다. 이 버튼에 외부 API를 쿼리하여 JSON을 반환하고 해당 JSON을 페이지에 표시하고 싶습니다. 어디서부터 시작해야할지 모르겠습니다. 버튼 자체가 외부 API를 쿼리합니까? 컨트롤러를 통과해야하며 컨트롤러가 외부 API를 쿼리하고 JSON을 가져와 JSON을이 페이지로 되돌려 주어야합니까? 이 JSON의 내용을 표시하거나 액세스하려면 어떻게해야합니까?

먼저 예를 들어,보기에서 LINK_TO 방법을 사용하여 버튼을 만들 :

솔직히 여기
+1

[이 Railscast] (http://railscasts.com/episodes/229-polling-for-changes) – Zabba

+0

참고로 도움이되지만, 특히 JSON 예제를 찾고 있는데, getScript)'. 이 예제가 내가 필요로하는 것에 어떻게 적용되는지보기 위해 레일스에서 ​​충분히 좋지는 않다 ... – sepiroth

+0

나는 또한 이것을 현저하게 발견한다. 거기에 많은 예제가 있지만 그들은 모두 당신이'action.js.erb'을 사용하고자한다고 가정하고 나는 그렇지 않습니다. 나는 ** 당신이 똑같은 것을 찾고 있다고 생각합니다 **. 그렇다면 예를 찾고 답변하려고 노력할 것입니다. – cbmeeks

답변

10

은 시작이다 ... JSON을 처리하는 방법의 좋은 레일 3.x의 예를 찾을 수 없습니다
=link_to "delete", "#{invitation_path(invitation)}.json", :method=>:delete, :remote=>true, :class=>"remove", :confirm=>'Are you sure you?' 

내 리소스의 URL에 ".json"을 추가한다는 점에 유의하십시오. 이것은 매개 변수의 의미를 보려면 AJAX delete, google link_to의 예입니다. 원격 사용자가 HTTP 요청을 매개 변수로 설정하는 경우 remote : true로 설정합니다. 즉, 브라우저에서 AJAX 호출로 변환됩니다. http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

: 혹시 AJAX의 결과에 대한 자세한 내용은 1 단계의 LINK_TO에 사용자가 클릭하면이 블로그 게시물을 볼 수있을 때 할 것입니다 브라우저를 호출 무엇인지 처리 할 수 ​​있도록

둘째, 일부 자바 스크립트를 쓰기 내 사이트에서

예 : 당신은 내가 반환 된 JSON을 구문 분석하고 볼과 그 기반으로 페이지의 HTML을 변경할 수 있습니다

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) 
     } 
    }); 
}); 

. 이 js는 여기에 포함되지 않은 상위 ​​뷰에 정의 된 CCS ID와 클래스를 사용합니다.

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 

희망이 도움말 :

지금 여기에 JSON을 뱉어 당신에게 자신의 컨트롤러를 작성하려는 경우

은 예입니다.

+1

당신은 "data-type"=> "json"을 link_to 호출에서 ".json"을 추가하는 대신에 설정할 수 있습니다. – caspyin

+1

또는 자바 스크립트에서 $ .ajaxSettings.dataType = 'json'을 PUT/POST/DELETE json에 대한 모든 원격 양식을 기본값으로 설정할 수 있습니다. 이것은 jquery-ujs 드라이버의 일부입니다 : https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L86 – adamlamar

6

오래된 질문,하지만 Ajaxifying 레일 응용 프로그램의 정말 좋은 개요는 다음과 같습니다

또한

Ajax in Rails 3.1 - A Roadmap

+0

이것은 지금까지 본 것 중에 최고입니다! –

1

는 다음과 같은 형식으로 오류를 반환 고려 :

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

이 보장됩니다 클라이언트 수 응답을 오류로 처리하십시오.