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

Rails 3+的简单示例;UJS使用Ajax进行远程调用,并呈现生成的JSON对象,ajax,json,ruby-on-rails-3,ujs,Ajax,Json,Ruby On Rails 3,Ujs,我正在尝试在Rails 3应用程序中添加一些Ajax功能 具体来说,我需要一个按钮,该按钮将提交一个Ajax请求以调用控制器中的远程函数,该函数随后查询API并将JSON对象返回到页面 收到JSON对象后,我希望显示内容 所有这些都是通过新的Rails3UJS方法实现的。网上有没有一个很好的例子/教程?我在谷歌上找不到。使用按钮作为入口点(即,用户单击按钮开始此过程)的简单示例也可以使用 编辑 让我用另一种方法来试试。我想让这个按钮查询一个外部API,它返回JSON,并在页面上显示该JSON。我

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

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

收到JSON对象后,我希望显示内容

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

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

以下是一个开始:

首先在视图中使用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_可以查看参数的含义。如果您使用参数:remote将HTTP请求设置为true,那么这一概念将从浏览器转换为AJAX调用

其次,编写一些javascript,这样您就可以处理当用户单击第1步的链接时浏览器将进行的AJAX调用的结果。有关详细信息,请参阅以下博文:

我的网站上的一个例子:

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)   
       }
    });
});
jQuery(函数($){
//创建一个方便的toggleLoading函数
var toggleLoading=function(){$(“#加载”).toggle()};
$(“待定邀请”)
.live(“ajax:加载”,切换加载)
.live(“ajax:complete”,切换加载)
.live(“ajax:success”,函数(事件、数据、状态、xhr){
var response=JSON.parse(xhr.responseText)
如果(response.result==“ok”){
$(this.fadeOut('fast');
}
否则{
var错误=$('');
errors.append('Pending invitation action error
  • '+response.error+'
'); $('#新的_邀请_错误')。追加(错误) } }); });
您可以看到,我解析了返回的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
类邀请控制器
其他的
format.json{render:json=>{:result=>“失败”,:error=>“找不到邀请#{params[:id]}”,:resource_id=>params[:id]}
结束
结束
结束
结束

希望能有所帮助。

老问题,但对Ajaxing Rails应用程序的一个非常好的概述是:


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

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

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

请看,这很有帮助,但我要特别查找的是一个JSON示例,而不是使用
getScript()
的示例。我不太擅长Rails,不知道这个例子如何应用于我需要的东西……我还发现这非常困难。这里有很多例子,但它们都假设您想使用
action.js.erb
,而我不想。我想你在找和我一样的东西。如果是这样,我将尝试找到一个示例并回答。您可以在链接_中将“数据类型”=>“json”设置为调用,而不是将“.json”附加到路由。或者在javascript中,您可以将$.ajaxSettings.dataType='json'设置为默认每个远程表单放置/发布/删除json。这是jquery ujs驱动程序的一部分:这是迄今为止我见过的最好的驱动程序!