rails应用ajax之一:使用纯js方法
考虑如下需求:
1. 用户输入一个用户名,当焦点跳出文本框时,检查该用户名是否有效
2. 动态更新检查的结果
我们使用ajax的方式来实现这个简单的功能,首先建立view:check.html.erb:
<%= javascript_include_tag "jquery" %> <%= javascript_include_tag "rails" %> <%= stylesheet_link_tag 'user' %> <h1>check user name</h1> <script> var xml_http = null; function set_xml_http() { if(!xml_http && typeof XMLHttpRequest != "undefined") xml_http = new XMLHttpRequest(); } function start_request() { //var name = $("#name").value; var name = document.getElementById("name").value; if(name != "") { set_xml_http(); var url = "/users/check_name?username="+name; xml_http.open("GET",url,true); xml_http.onreadystatechange = request_handle; xml_http.send(null); } else document.getElementById("info").innerHTML = "你还没有输入name哦!" } function request_handle() { if(xml_http.readyState < 4) info.innerHTML = "正在检查name是否合法..." else if(xml_http.readyState == 4) { if(xml_http.status == 200) info.innerHTML = xml_http.responseText; } else alert("错误:请求页面异常!") } </script> <%= text_field_tag("name","",onchange:"start_request()")%> <span id="info"></span>
不知道上述代码为毛不能使用jQuery!?暂且放一边吧...接着我们来写服务器对应的check_name方法:
def mk_color(color,txt) "<span class=#{color}>#{txt}</span>" end def check_name name = params[:username] if name.size <= 6 render text:mk_color("red","#{name} 长度必须大于6个字节") elsif name =~ /fk|fuck|shit/ render text:mk_color("red","#{name} 不能包含不和谐单词") else render text:mk_color("green","#{name} 可以使用") end end
如果name有效则返回绿色文字,否则返回红色文字;这个可以通过css来实现,对应的css如下:
.red {
color:red
}
.green {
color:green
}
别忘了还要加路由啊:
get 'users/check' => 'users#check' get 'users/check_name' => 'users#check_name'
代码流大致如下:首先用户访问localhost:3000/users/check页面,然后输入用户名,当焦点离开文本框时,调用start_request方法;该方法首先建立一个xml_html对象(不考虑浏览器为ie情况,否则还得加一坨代码),该方法在safari和firefox测试有效。接着通过xml_html向check_name Action发送请求,随后注册一个回调函数request_handle;当请求返回时就会执行回调函数,该函数将结果实时动态的插入info对象。
rails应用ajax之一:使用纯js方法的更多相关文章
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
- Ajax,纯Js+Jquery
AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过X ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯 js 让浏览器不缓存 ajax 请求
开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态. 现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- js进阶 14-1 jquery的ajax系列中的load方法的作用是什么
js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- jQuery+AJAX实现纯js分页功能
使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...
随机推荐
- [ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan ----------------- ...
- UNIX网络编程——进程间通信概述
一.顺序程序与并发程序特征 顺序程序特征 顺序性封闭性:(运行环境的封闭性)确定性可再现性 并发程序特征 共享性并发性随机性 二.进程互斥 1.由于各进程要求共享资源,而且有些资源需要互斥使用,因此各 ...
- Editorial Board 、co-editor、ediitor、editor-in-chief的区别
昨天更新掘金APP-IOS之后发现一个比较严重的Bug,联系管理者报告了Bug,中途发现掘金的发布功能需要申请成为co-editor才行. 那么这里科普一下这几个名词: Editorial Board ...
- 【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)
一. iOS 项目简介 1. iOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类 ...
- Dalvik虚拟机
Dalvik虚拟机是google专门为android平台开发的一个java虚拟机,但它并没有使用JVM规范.Dalvik虚拟机主要完成对象生命周期的管理.线程管理.安全和异常管理以及垃圾回收等重要功能 ...
- android之.9.png详解
.9.PNG是安卓开发里面的一种特殊的图片,这种格式的图片通过ADT自带的编辑工具生成,使用九宫格切分的方法,使图片支持在android 环境下的自适应展示. PNG,是一种非失真性压缩位图图形文件格 ...
- 最简单的视频编码器:基于libx264(编码YUV为H.264)
===================================================== 最简单的视频编码器系列文章列表: 最简单的视频编码器:编译 最简单的视频编码器:基于libx ...
- 开源项目——小Q聊天机器人V1.4
小Q聊天机器人V1.0 http://blog.csdn.net/baiyuliang2013/article/details/51386281 小Q聊天机器人V1.1 http://blog.csd ...
- Oracle EBS R12经验谈(二)
作者: jianping.ni 时间: 2009-2-13 12:52 标题: Oracle EBS R12经验谈(二) OAF页面:银行帐户开户人LOV值列表无值 在输入 应付超 ...
- Java中把JSON和List结果集互转的代码片段整理
1.将JSON字符串转换成List结果集的方式: //查询结果集 PageDatums picPageDatums = pictureLibraryService.selectPagePictureF ...