रिमोट कॉल करने के लिए अजाक्स का उपयोग करके रेल 3 + यूजेएस का सरल उदाहरण, और परिणामस्वरूप JSON ऑब्जेक्ट

Question

प्रस्तुत करना मैं अपने रेल 3 ऐप में कुछ अजाक्स कार्यक्षमता जोड़ने की कोशिश कर रहा हूं।

विशेष रूप से, मुझे एक बटन चाहिए जो मेरे नियंत्रक में रिमोट फ़ंक्शन को कॉल करने के लिए अजाक्स अनुरोध सबमिट करेगा, जो बाद में एक एपीआई से पूछताछ करता है और पृष्ठ पर JSON ऑब्जेक्ट देता है।

एक बार जब मैं JSON ऑब्जेक्ट प्राप्त करता हूं तो मैं सामग्री प्रदर्शित करना चाहता हूं।

यह सब नए रेल 3 यूजेएस दृष्टिकोण के साथ भी है। क्या इस ऑनलाइन के लिए कहीं अच्छा उदाहरण/ट्यूटोरियल है? मैं Google पर एक नहीं ढूंढ पाया। एंट्री पॉइंट के रूप में बटन का उपयोग करके एक साधारण उदाहरण (यानी, उपयोगकर्ता इस प्रक्रिया को शुरू करने के लिए बटन क्लिक करता है) भी काम करेगा।

संपादित करें मुझे इसे एक अलग दृष्टिकोण से आज़माएं। मैं यह बटन एक बाहरी एपीआई पूछता हूं, जो JSON लौटाता है, और उस JSON को पृष्ठ पर प्रदर्शित करता है। मुझे नहीं पता कि कहां से शुरू करना है। क्या बटन स्वयं बाहरी एपीआई से पूछताछ करता है? क्या मुझे नियंत्रक के माध्यम से जाने की आवश्यकता है, और नियंत्रक बाहरी एपीआई पूछताछ करता है, JSON प्राप्त करता है, और JSON को इस पृष्ठ पर वापस देता है? मैं इस JSON की सामग्री को कैसे प्रदर्शित/एक्सेस करूं? मैं ईमानदारी से कैसे JSON संभाल करने का एक अच्छा रेल 3.x उदाहरण नहीं मिल सकता है ...

Answer 1

यहाँ एक शुरुआत है:

पहले उदाहरण के लिए, अपने दृश्य में एक LINK_TO विधि के साथ अपने बटन बनाने:

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

ध्यान दें कि मैं अपने संसाधन के यूआरएल में ".json" संलग्न कर रहा हूं। पैरामीटर के अर्थ को देखने के लिए यह एक AJAX डिलीट का एक उदाहरण है, google link_to। अवधारणा अगर आप पैरामीटर के साथ अपना HTTP अनुरोध करते हैं: दूरस्थ पर सत्य सेट, दूसरे शब्दों में इसका अनुवाद आपके ब्राउज़र से AJAX कॉल में किया जाता है।

दूसरा, कुछ जावास्क्रिप्ट लिखना ताकि आप संसाधित कर सकते हैं क्या कभी AJAX का परिणाम आपके ब्राउज़र फोन कर देगा जब जानकारी के लिए चरण 1 के LINK_TO पर उपयोगकर्ता क्लिक आप इस ब्लॉग पोस्ट देख सकते हैं: 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 पार्स और देख सकते हैं और उसके आधार पर पृष्ठ पर एचटीएमएल बदल सकते हैं। ध्यान दें कि यह जेएस शीर्ष दृश्य में परिभाषित सीसीएस आईडी और कक्षाओं का उपयोग करता है जो यहां शामिल नहीं है।

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 थूक से बाहर करने के लिए खुद का नियंत्रक लिखने के लिए चाहते हैं, तो एक उदाहरण है।

Answer 2

पुराना सवाल है, लेकिन Ajaxifying रेल आवेदनों की एक बहुत अच्छी सिंहावलोकन है:

Ajax in Rails 3.1 - A Roadmap

Answer 3

इसके अलावा निम्न स्वरूप में त्रुटियां लौटाने पर विचार करें:

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

इससे यह सुनिश्चित होगा कि आपके ग्राहक कर सकते हैं प्रतिक्रिया को एक त्रुटि के रूप में संसाधित करें।