简单的Rails 3 + UJS示例使用Ajax进行远程调用，并渲染生成的JSON对象

我试图在Rails 3应用程序中添加一些Ajax功能。简单的Rails 3 + UJS示例使用Ajax进行远程调用，并渲染生成的JSON对象

具体来说，我想要一个按钮，它将提交一个Ajax请求，以在我的控制器中调用远程函数，随后查询API并将JSON对象返回给页面。

一旦我收到JSON对象，我想显示内容。

所有这一切都与新的Rails 3 UJS方法一样。 有没有一个很好的例子/教程这个在线的地方？我一直没有找到一个谷歌。使用按钮作为入口点的一个简单示例（即，用户单击按钮以启动此过程）也可以工作。

编辑让我用不同的方法试试这个。我想让这个按钮查询一个外部API，它返回JSON，并在页面上显示该JSON。我不知道哪里可以开始。按钮本身是否查询外部API？我是否需要浏览控制器，并让控制器查询外部API，获取JSON并将JSON返回到此页面？我如何显示/访问此JSON的内容？老实说，我无法找到如何处理JSON一个很好的Rails 3.x的例子...

来源

2011-04-25 sepiroth

请参阅[本Railscast]（http://railscasts.com/episodes/229-polling-for-changes） – Zabba 2011-04-25 02:06:00

这很有帮助，但我特别寻找JSON示例，而不是使用'getScript（）'。我在Rails方面还不够好，看看这个例子如何适用于我所需要的... – sepiroth 2011-04-25 03:31:57

我也发现这非常难。这里有很多例子，但是他们都假设你想使用'action.js.erb'，但我不这样做。我**认为**你正在寻找我一样的东西。如果是这样，我会尝试找到一个例子并回复。 – cbmeeks 2011-04-26 15:49:07

这里是一个开始：

先用您的视图的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请求的参数：remote设置为true，换句话说，这是从您的浏览器转换为AJAX调用。

其次，写一些JavaScript代码，这样就可以处理什么都是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和和改变基于该网页的HTML。请注意，此js使用顶部视图中定义的CCS ID和类别，此处不包括该ID。

如果现在要你写自己的控制器来这里吐出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

希望这有助于。

来源

2011-04-26 19:17:02

你可以在你的link_to调用中设置“data-type”=>“json”，而不是追加“.json”来路由。 – caspyin 2012-11-13 00:12:16

或者在您的JavaScript中，您可以将$ .ajaxSettings.dataType ='json'设置为每个远程窗体默认为PUT/POST/DELETE json。这是jquery-ujs驱动程序的一部分：https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L86 – adamlamar 2013-03-14 21:15:06

老问题，但Ajaxifying Rails应用程序的一个很好的概述是：

Ajax in Rails 3.1 - A Roadmap

来源

2012-01-27 07:27:12

这是迄今为止我见过的最好的！ – 2013-10-04 15:52:01

也可以考虑采用以下格式返回错误：

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

这将确保您的客户端可以将响应处理为错误。

来源

2013-03-23 18:15:36 RonanOD

简单的Rails 3 + UJS示例使用Ajax进行远程调用，并渲染生成的JSON对象

回答

相关问题