Rails3 Ajax 筆記-程序员宅基地

技术标签: coffeescript  rails  ajax  prototype  javascript  jquery  

Rails3 Ajax 筆記

Posted on  

最近都在忙 Rails app 的網頁前端,也花了點時間摸索 Rails 下的Ajax。Rails3 引進了 UJS (Unobtrusive JavaScript),也就是不會有像 Rails2 一樣的 inline javascript,但也意味著開發者要對 js 有更深入的了解麻煩

簡單的介紹

由於不會有 inline-javascript,有關一些跳出確認訊息窗跟 Ajax 的處理都會由 public/javascript/rails.js 來負責,Rails3 的預設框架是 Prototype ,所以如果你比較習慣 jQuery 的話,可以裝官方的 jQuery 版本 ,然後再把原本那個換掉就好,這邊用 jQuery 來做介紹(因為 Rails3.1 的預設框架是 jQuery ,還真是風水輪流轉)。記得要把 config/application.rb 的預設 JavaScript 檔案設定好,很多人(我)以為只要把jquery.js 匯進來就好,忘了 jquery_ujs.js 或是匯入的順序搞錯。

config.action_view.javascript_expansions[:defaults] = %w(jquery jquery_ujs)

jquery_ujs.js 這個檔案是負責施展魔法的關鍵,我沒有完全看完。比較要注意的是handleRemote 跟 handleMethod ,前者會處理有標記 data-remote = "true" 的表單或連結,後者則會處理非 Ajax 的表單或連接跟加上 csrf 標記。

remote => true

原先的 non-ajax 連結或表單只要在後面加上 :remote => true,Rails render 出來的 html 會加上 data-remote = "true" 屬性,這樣也告訴 jquery_ujs.js 這個部分要非同步處理。

 <%= link_to "Delete", comment, :method => :delete, :remote => true %> 
 <% form_for @page, :remote => true do %> # 下略 

加上那幾個字後,重新試試看,你會發先原先的重導向或是 render template 都沒有效果,這是很正常的,因為預設接受的回應是 JavaScript,而我們的伺服端卻只有放 html 的模版。如果你不確定是不是真的有傳送要求,你可以在開發工具(我用 Chrome 的 Inspector )裡的 XHR 欄位裡找找已經送出的 XHR Request。

JavaScript 到底要放在哪?

有很多不同的方法,Rails3 以前可能是用 RJS 在伺服端寫下 Ruby code 然後它會轉成對應的 JavaScript (用 Prototype ) ,不過 RJS 跟 Prototype 要在 Rails3.1 被移出預設的框架了,所以 DHH 的建議是要你真的去寫 JavaScript 不要再仰賴 RJS 了,不再有神奇的魔法幫你處理 Ajax 了。

所以在 Rails3.1 還沒釋出前,有兩種方式撰寫 JavaScript。

  1. 你可以選擇把 JavaScript 放在伺服端當作 response 傳回,好處是如果你想要用到一些實體變數或輔助方法,你可在尾巴加上 .erb,這樣可以在回傳前先用 ERB render 一遍。
    def destroy
      @comment = Comment.find(params[:id])
      @comment.destroy
      respond_to do |format|
        format.html {
           redirect_to comments_path }
        format.js
      end
    end
    /* Eliminate the comment by fading it out */
    $('#comment_<%= @comment.id %>').fadeOut();

    Code來源

  2. JavaScript 全部放在客戶端,這樣的好處是比較好管理,畢竟大部分的邏輯都是在處理 DOM ,不過這時與伺服器溝通就要仰賴指定的資料格式,可以用 JSON 傳回整個物件交由客戶端決定如何顯示,或傳回 HTML 再塞進頁面裡,或者乾脆直接傳回文字。關於客戶端的 JavaScript ,jquery_ujs.js 提供了與  jQuery Ajax 的對應的全域事件,會在處理標有 data-remote = "true"的表單或連結時被觸發。你只要把你要的方法綁在特定的事件上就可以了。
    $("a[data-remote]")
            .live("ajax:beforeSend",function(xhr,settings){
          
                $(this).parent().effect("highlight");
            })
            .live("ajax:success",function(xhr,data,status){
          
                $(this).parent().fadeOut();
            })
            .live("ajax:error",function(evt, xhr, status, error){
          
                alert(xhr.responseText);
            });

來杯咖啡吧!

來源 RailsCast

覺得 JavaScript 很不好寫,寫起來很不舒服嗎?,Rails3.1 會把 CoffeeScript 當作預設的客戶端腳本語言,不知道它是什麼嗎?寫一整天的 JavaScript 再回頭看看它的網站,你就會愛上它了。

結語

Rails 把開發 Ajax 的責任遞給了開發者,這也意味著我們與要對自己的 code 負責,要對 JavaScript 有更深入的了解。而我大概也要去惡補一下我的 JavaScript 了(笑)。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/emerald0106/article/details/7080510

智能推荐

【新手科研指南5】深度学习代码怎么读-小白阶段性思路(以手写数字识别应用为例)_深度学习程序怎么读-程序员宅基地

文章浏览阅读6.2k次,点赞6次,收藏26次。我是一个深度学习代码小白,请你用中文写上注释,能让我能轻松理解下面这段代码。注意包含所有函数、调用和参数的注释。以同样的python代码块样式返回你写的代码给我。代码看累了,就看《动手学深度学习》文档:基于PyTorch框架,从底层函数实现基础功能,再到框架的高级功能。努力上路的小白一枚,麻烦路过的大佬指导一二,同时希望能和大家交流学习~争取更新学习这个文档的专栏,记录学习过程。量身定做了一套话术hhh,亲身测试还不错。这个感觉更浅一点儿,之后复习看吧。20天吃掉那只Pytorch。_深度学习程序怎么读

Java学习路线图,看这一篇就够了!-程序员宅基地

文章浏览阅读2.7w次,点赞126次,收藏1.2k次。耗废1024根秀发,Java学习路线图来了,整合了自己所学的所有技术整理出来的2022最新版Java学习路线图,适合于初、中级别的Java程序员。_java学习路线

PCL_Tutorial2-1.7-点云保存PNG_pcl::io:savepng-程序员宅基地

文章浏览阅读4.4k次。1.7-savingPNG介绍代码详情函数详解savePNGFile()源码savePNGFile()源码提示savePNGFile()推荐用法处理结果代码链接介绍PCL提供了将点云的值保存到PNG图像文件的可能性。这只能用有有序的云来完成,因为结果图像的行和列将与云中的行和列完全对应。例如,如果您从类似Kinect或Xtion的传感器中获取了点云,则可以使用它来检索与该云匹配的640x480 RGB图像。代码详情#include <pcl / io / pcd_io.h>#incl_pcl::io:savepng

知乎问答:程序员在咖啡店编程,喝什么咖啡容易吸引妹纸?-程序员宅基地

文章浏览阅读936次。吸引妹子的关键点不在于喝什么咖啡,主要在于竖立哪种男性人设。能把人设在几分钟内快速固定下来,也就不愁吸引对口的妹子了。我有几个备选方案,仅供参考。1. 运动型男生左手单手俯卧撑,右手在键盘上敲代码。你雄壮的腰腹肌肉群活灵活现,简直就是移动的春药。2.幽默男生花 20 块找一个托(最好是老同学 or 同事)坐你对面。每当你侃侃而谈,他便满面涨红、放声大笑、不能自已。他笑的越弱_咖啡厅写代码

【笔试面试】腾讯WXG 面委会面复盘总结 --一次深刻的教训_腾讯面委会面试是什么-程序员宅基地

文章浏览阅读1.2w次,点赞5次,收藏5次。今天 (应该是昨天了,昨晚太晚了没发出去)下午参加了腾讯WXG的面委会面试。前面在牛客上搜索了面委会相关的面经普遍反映面委会较难,因为都是微信的核心大佬,问的问题也会比较深。昨晚还蛮紧张的,晚上都没睡好。面试使用的是腾讯会议,时间到了面试官准时进入会议。照例是简单的自我介绍,然后是几个常见的基础问题:例如数据库索引,什么时候索引会失效、设计模式等。这部分比较普通,问的也不是很多,不再赘述。现在回想下,大部分还是简历上写的技能点。接下来面试官让打开项目的代码,对着代码讲解思路。我笔记本上没有这部分代码,所_腾讯面委会面试是什么

AI绘画自动生成器:艺术创作的新浪潮-程序员宅基地

文章浏览阅读382次,点赞3次,收藏4次。AI绘画自动生成器是一种利用人工智能技术,特别是深度学习算法,来自动创建视觉艺术作品的软件工具。这些工具通常基于神经网络模型,如生成对抗网络(GANs),通过学习大量的图像数据来生成新的图像。AI绘画自动生成器作为艺术与科技结合的产物,正在开启艺术创作的新篇章。它们不仅为艺术家和设计师提供了新的工具,也为普通用户提供了探索艺术的机会。随着技术的不断进步,我们可以预见,AI绘画自动生成器将在未来的创意产业中发挥越来越重要的作用。

随便推点

Flutter ListView ListView.build ListView.separated_flutter listview.separated和listview.builder-程序员宅基地

文章浏览阅读1.7k次。理解为ListView 的三种形式吧ListView 默认构造但是这种方式创建的列表存在一个问题:对于那些长列表或者需要较昂贵渲染开销的子组件,即使还没有出现在屏幕中但仍然会被ListView所创建,这将是一项较大的开销,使用不当可能引起性能问题甚至卡顿直接返回的是每一行的Widget,相当于ios的row。行高按Widget(cell)高设置ListView.build 就和io..._flutter listview.separated和listview.builder

2021 最新前端面试题及答案-程序员宅基地

文章浏览阅读1.4k次,点赞4次,收藏14次。废话不多说直接上干货1.js运行机制JavaScript单线程,任务需要排队执行同步任务进入主线程排队,异步任务进入事件队列排队等待被推入主线程执行定时器的延迟时间为0并不是立刻执行,只是代表相比于其他定时器更早的被执行以宏任务和微任务进一步理解js执行机制整段代码作为宏任务开始执行,执行过程中宏任务和微任务进入相应的队列中整段代码执行结束,看微任务队列中是否有任务等待执行,如果有则执行所有的微任务,直到微任务队列中的任务执行完毕,如果没有则继续执行新的宏任务执行新的宏任务,凡是在..._前端面试

linux基本概述-程序员宅基地

文章浏览阅读1k次。(3)若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。(3)若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。_linux

JavaScript学习手册十三:HTML DOM——文档元素的操作(一)_javascript学习手册十三:html dom——文档元素的操作(一)-程序员宅基地

文章浏览阅读7.9k次,点赞26次,收藏66次。HTML DOM——文档元素的操作1、通过id获取文档元素任务描述相关知识什么是DOM文档元素节点树通过id获取文档元素代码文件2、通过类名获取文档元素任务描述相关知识通过类名获取文档元素代码文件3、通过标签名获取文档元素任务描述相关知识通过标签名获取文档元素获取标签内部的子元素代码文件4、html5中获取元素的方法一任务描述相关知识css选择器querySelector的用法代码文件5、html5中获取元素的方法二任务描述相关知识querySelectorAll的用法代码文件6、节点树上的操作任务描述相关_javascript学习手册十三:html dom——文档元素的操作(一)

《LeetCode刷题》172. 阶乘后的零(java篇)_java 给定一个整数n,返回n!结果尾数中零的数量-程序员宅基地

文章浏览阅读132次。《LeetCode学习》172. 阶乘后的零(java篇)_java 给定一个整数n,返回n!结果尾数中零的数量

php 公众号消息提醒,如何开启公众号消息提醒功能-程序员宅基地

文章浏览阅读426次。请注意,本文将要给大家分享的并不是开启公众号的安全操作风险提醒,而是当公众号粉丝给公众号发消息的时候,公众号的管理员和运营者如何能在手机上立即收到消息通知,以及在手机上回复粉丝消息。第一步:授权1、在微信中点击右上角+,然后选择“添加朋友”,然后选择“公众号”,然后输入“微小助”并关注该公众号。2、进入微小助公众号,然后点击底部菜单【新增授权】,如下图所示:3、然后会打开一个温馨提示页面。请一定要..._php微信公众号服务提示

推荐文章

热门文章

相关标签