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

Question

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

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

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

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

编辑 让我用不同的方式尝试。我想要这个按钮查询外部API，返回JSON，并在页面上显示该JSON。我甚至不知道从哪里开始。按钮本身是否查询外部API？我需要通过控制器，让控制器查询外部API，获取JSON，然后将JSON返回给这个页面吗？如何显示/访问此JSON的内容？我实在找不到一个好的Rails 3.x处理JSON的例子...

- Tony Stark

---

请查看这个 Railscast。 - Zabba

这很有帮助，但我特别需要一个JSON示例，而不是使用getScript()的示例。我对Rails的掌握还不够好，无法看出这个示例如何适用于我所需的内容... - Tony Stark

我也觉得这非常困难。虽然有很多示例，但它们都假定您想使用action.js.erb，而我不想要。我认为您正在寻找与我相同的东西。如果是这样，我会尝试找到一个示例并回复。 - cbmeeks

Answer 1

以下是一个开始:

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

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

请注意，我在我的资源URL末尾附加了“.json”。这只是一个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

希望这可以帮到你。

- Matteo Melani

---

你可以在link_to调用中设置"data-type" => "json"，而不是将".json"附加到路由。 - BeeZee

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

Answer 2

虽然这是一个老问题，但是有一篇非常好的关于Ajax化Rails应用程序的概述：

Rails 3.1中的Ajax - 路线图

- event_jr

---

到目前为止，这是我见过的最好的！ - Alexander Suraphel

Answer 3

还要考虑以以下格式返回错误：

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

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

- RonanOD