11

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

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

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

所有这些都使用新的 Rails 3 UJS 方法。在某个地方有一个很好的例子/教程吗？我一直无法在谷歌上找到一个。一个使用按钮作为入口点的简单示例（即，用户单击按钮开始此过程）也可以。

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

4

3 回答 3

10

这是一个开始：

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

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

请注意，我将“.json”附加到我的资源的 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

希望这有帮助。

于 2011-04-26T19:17:02.773 回答
6

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

Rails 3.1 中的 Ajax - 路线图

于 2012-01-27T07:27:12.760 回答
1

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

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

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

于 2013-03-23T18:15:36.580 回答