如何实现 zepto的ajax 前置过滤器

 我来答
折柳成萌
高粉答主

2017-09-26 · 繁杂信息太多,你要学会辨别
知道顶级答主
回答量:4.4万
采纳率:96%
帮助的人:6002万
展开全部
Rails中Jquery支持下的Ajax请求

在rails中使用 Ajax 是十分方便的,你可能早已经熟悉了这样的代码:
在views中声明属性 :remote => true :
<%= form_for(@post, :remote => true) do |f| %>
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :content %><br />
<%= f.text_field :content %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>

接着在对应 controller 里接收请求,做如下处理:
respond_to do |format|
format.html
format.js { render 'success' } # 这里表示你收到的是ajax请求,将结果给success.js.erb处理
end

最后就是在 success.erb.js 文件里做一些操作:
alert("ok")

Everything is so easy!
但是,你知道为什么可以使用 remote 属性来发送ajax请求吗?
在rails中assets目录下的 application.js 文件可以看到:
//= require jquery
//= require jquery_ujs

对,就是要归功于 jquery_ujs.js 这个文件,它会找出所有 remote 链接和表单并重写 click 事件来驱动它们发送AJAX请求到服务器。
亲,说到这儿,你能猜到我想要说什么了吗?对!如果我们想在rails里使用zepto来发送ajax请求,我们要做的就是模仿 jquery_ujs.js 所做的。
在Rails基于Zepto使用Ajax
卖了半天的关子,终于进入正题了。 首先我们得看下 zepto 框架对于js的ajax请求提供的方法调用,文档里大概是这样一种方式:
Ajax requests

$.ajax

$.ajax(options) ⇒ XMLHttpRequest

type (default: “GET”): HTTP request method (“GET”, “POST”, or other)
url (default: current URL): URL to which the request is made
data (default: none): data for the request; for GET requests it is appended to query string of the URL. Non-string objects will get serialized with


Ajax callbacks

beforeSend(xhr, settings)
success(data, status, xhr)
error(xhr, errorType, error)
complete(xhr, status)


Ajax events



在发送ajax请求时,我们可以指定ajax请求的类型,url等属性,在ajax请求过程中会有相应的回调函数以及ajax事件函数。这些就不多说了,现在我们要做的就是来模拟jquery_ujs.js所做的工作:
我们先新建一个 mock_ujs.js ,当文档加载完成后来监视Dom元素的行为:
$(document).ready(function() {
//...
}

添加一个 click 事件:
$(document).ready(function() {
$('.load').live('click', function() {
//可以在这里取页面上的一些数据
var text = $(".data").text();

$.ajax({
type: 'http请求如GET、POST',
url: '所请求的url',
// data为发送的数据,将以url?a=xx&b=xxx这种方式发送
data: { a: xxx, b: xxxx },
// 期望服务器返回的数据类型:
dataType: 'json',
timeout: 10000,
beforeSend: function(xhr, settings) {
//回调函数
},
success: function(data){
//data为返回数据
},
error: function(xhr, type){
//错误处理
}
});
});
}

现在请求已经到达服务器, controller 收到请求并进行相应处理:
def custom
data = Model.find(data)

# return the data as the format of json
respond_to do |format|
format.json {
render :inline => data.to_json
}
end
end
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式