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);
});
HTML
Rails Controller 中
def handle
#render handle.html.erb
end
Javascript 文件中
bind('ajax:success', function(evt, data, status, xhr){
$('#tab-box').html(xhr.responseText);
});
JSON
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 返回正确类型的值即可