rails应用ajax之一:使用纯js方法
2015-01-12 09:56
453 查看
考虑如下需求:
1. 用户输入一个用户名,当焦点跳出文本框时,检查该用户名是否有效
2. 动态更新检查的结果
我们使用ajax的方式来实现这个简单的功能,首先建立view:check.html.erb:
不知道上述代码为毛不能使用jQuery!?暂且放一边吧...接着我们来写服务器对应的check_name方法:
如果name有效则返回绿色文字,否则返回红色文字;这个可以通过css来实现,对应的css如下:
.red {
color:red
}
.green {
color:green
}
别忘了还要加路由啊:
代码流大致如下:首先用户访问localhost:3000/users/check页面,然后输入用户名,当焦点离开文本框时,调用start_request方法;该方法首先建立一个xml_html对象(不考虑浏览器为ie情况,否则还得加一坨代码),该方法在safari和firefox测试有效。接着通过xml_html向check_name Action发送请求,随后注册一个回调函数request_handle;当请求返回时就会执行回调函数,该函数将结果实时动态的插入info对象。
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方法
- rails应用ajax之一:使用纯js方法
- rails应用在passenger + nginx服务器下使用proxy_cache及proxy_cache_purge模块的方法
- ASP.Net Ajax应用初步:使用AJAX直接调用后台方法
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
- rails应用ajax之二:使用rails自身支持
- js中使用Ajax方法
- 简单ASP.NET AJAX 客户端应用:用JS直接调用WebServices方法
- 使用ASP.NET AJAX 从脚本中调用Web 服务的应用方法
- Yii——使用CHtml::link()等方法时,设置htmlOptions属性可快速生成js代码和ajax请求
- rails应用ajax之二:使用rails自身支持
- .net的ajax中使用javascript的send方法post参数,url传参,ajax同步异步JS包,传参即可用
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- 快速上手,使用 JS 配合XML-RPC(JSP)实现AJAX类型应用
- Js中使用hasOwnProperty方法检索ajax响应对象的例子
- ASP.Net Ajax应用初步:使用AJAX直接调用后台方法
- 模仿 JQuery的ajax方法$.get,理解js回调函数应用的方式
- 关于ajax页面里的js方法无法使用的解决办法
- 使用jquery.form.js的ajaxsubmit方法提交数据的Bug
- Js中使用hasOwnProperty方法检索ajax响应对象的例子