Rails 实战 - JavaScript

从 Rails 3.1 开始已经将 jQuery 作为默认的 Javascript 库，本文将会介绍如何结合 jQuery 和 Rails 3.1 来编写 AJAX 应用，结合 jQuery 和 Rails 3.1 关键在于 [jquery_ujs.js][1] 文件，ujs 是 Unobtrusive JavaScript 的缩写，意味着将行为 Javascript 和表现 HTML 分离开，不要写如下面这样的代码。

<button onClick="alert('Hello')">Hello</button>

jquery_ujs.js 实现 AJAX 的原理

既然不能在 HTML 中直接为 HTML 标签绑定事件，那么将采用如下方式

ERB 文件中

<%= link_to "收藏", favoriate_idea_path(idea), :remote => true %>

HTML 的结果

<a href="/ideas/2/favoriate" data-remote="true">收藏</a>

在 [jquery_ujs.js][1] 中会通过如下选择器获取需要使用 AJAX 来发送请求的表单或链接

$('form[data-remote]')
$('a[data-remote], input[data-remote]')

处理 AJAX 的响应，通过对表单和链接的回调方法来实现，如下是回调事件

ajax:beforeSend //发送请求前
ajax:success //请求成功
ajax:complete //请求完成
ajax:error //请求失败

对表单和链接的绑定相应的事件和方法

$('#create_comment_form')
.bind("ajax:beforeSend", function(evt, xhr, settings){
    // do something...
})
.bind("ajax:success", function(evt, data, status, xhr){
    // do something...
})
.bind('ajax:complete', function(evt, xhr, status){
    // do something...
})
.bind("ajax:error", function(evt, xhr, status, error){
    // do something...
});

处理不同响应类型

Rails Controller 中

def handle
    render :text => "OK"
end

Javascript 文件中

bind('ajax:success', function(evt, data, status, xhr){
    alert(xhr.responseText);
});

Rails Controller 中

def handle
 #render handle.html.erb
end

Javascript 文件中

bind('ajax:success', function(evt, data, status, xhr){
    $('#tab-box').html(xhr.responseText);
});

Rails Controller 中

def handle
    render :json => idea.to_json
end

Javascript 文件中

bind('ajax:success', function(evt, data, status, xhr){
 var idea = $.parseJSON(xhr.responseText);
});

Javascript

Rails Controller 中

def handle
 #render handle.js.erb
end

Javascript 文件中

不用做什么，浏览器会执行返回的 Javascript 的代码

用 jQuery 直接发送 AJAX 请求

使用 jQuery AJAX 发送正确类型（text, json, javascript…）的请求，Rails 返回正确类型的值即可