Rails 3 + UJS使用Ajax进行远程调用，并呈现结果JSON对象的简单示例

Question

我正在尝试在我的Rails 3应用程序中添加一些Ajax功能。

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

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

所有这些都是通过新的Rails 3 UJS方法实现的。是否有一个很好的例子/教程，这在网上某处?我没能在谷歌上找到。一个使用按钮作为入口点的简单示例(即，用户单击按钮以开始此过程)也可以工作。

编辑让我用另一种方法试试。我想让这个按钮查询一个返回JSON的外部API，并在页面上显示该JSON。我都不知道从何说起。按钮本身是否查询外部API?我是否需要通过控制器，并让控制器查询外部API，获取JSON，并将JSON返回到此页面?我如何显示/访问这个JSON的内容?老实说，我找不到一个好的Rails 3。

Answer 1

开头:

首先在视图中使用link_to方法创建按钮，例如:

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

注意我附加了"。到我的资源的url。这只是一个AJAX删除的例子，google link_to查看参数的含义。如果您将参数:remote设置为true来发出HTTP请求，换句话说，这将被转换为来自浏览器的AJAX调用。

其次，编写一些javascript，以便可以处理当用户单击步骤1的link_to时浏览器发出的AJAX调用的结果。有关详细信息，请参阅这篇博客文章: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和类，而这里没有包含。

如果你现在想编写自己的控制器来输出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

Answer 2

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

Rails 3.1中的Ajax -路线图

Answer 3

还可以考虑以以下格式返回错误:

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