ajax实现异步请求,不跳转页面的情况下,达到检验用户名等信息是否效果的功能!
2014-09-27 09:05
1051 查看
我们在用户注册页面时常常要考虑到登录名不能重复的问题,然而解决这个问题的方式有很多,可以采用from表单提交然后重定向等方法来实现,甚至于我们可以采用iframe的布局框架也能实现,但是我更加推崇的是使用ajax的方法。下面我就详细介绍使用ajax的方式来实现异步校验的功能:
方法一:通过form表单提交+创建ajax引擎的方式异步校验
第一步:首先我们在html或者jsp等的界面中创建ajax引擎(javascript代码)
第二步:创建调用ajax引擎的方法(javascript代码)
第三步:添加html代码的onclick或者其他鼠标事件函数,我这里使用的是strust标签,如果你是直接的html标签,相应自定义就好!
第四步:创建servelt访问数据库,然后编写逻辑代码返回相应的信息(这个就是普通的查询数据库的代码,就不再累赘,我这里设置的返回信息室1或者2,当然你可以自定义)
方法二:采用ajax提交+引入jquery.js的方式实现异步校验
第一步:引入jquery.js,因为ajax提交必须引用jquery.js
第二步:创建ajax提交的方法
第三步:添加html代码的onclick或者其他鼠标事件函数
第四步:创建servelt访问数据库,然后编写逻辑代码返回相应的信息(这个就是普通的查询数据库的代码,就不再累赘,我这里设置的返回信息室fail/uccess/old,当然你可以自定义)
推荐阅读我的另一篇关于博客:通过ajax和form提交转向
方法一:通过form表单提交+创建ajax引擎的方式异步校验
第一步:首先我们在html或者jsp等的界面中创建ajax引擎(javascript代码)
<span style="font-size:18px;">//创建ajax引擎 function createXmlHttpRequest(){ var xmlHttp; try { xmlHttp=new XMLHttpRequest(); }catch(e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; }</span>
第二步:创建调用ajax引擎的方法(javascript代码)
<span style="font-size:18px;">function checkLogonName(){ var logonName = document.getElementById("logonName").value; //第一步:创建ajax引擎 var xmlHttp = createXmlHttpRequest(); //第二步:事件处理函数,实质上相当一个监听,监听服务器与客户端的连接状态 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ var data = xmlHttp.responseText; //alert(data); </span>
<span style="font-size:18px;"> //data是后台反馈回来的信息,我这里的后台是放回1,2的数字,你可以自定义 if(data==1){ alert("当前输入的登录名["+logonName+"]已被其他人占用,请重重新输入!"); document.getElementById("logonName").value = ""; document.getElementById("logonName").focus(); } } } } //第三步:与后台服务器建立一个连接 xmlHttp.open("post","../../CheckLogonName",true);//蓝色部分为我们访问servlet的路径 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //第四步:发送请求的参数 xmlHttp.send("logonName="+logonName); //提交我们用于数据库校验的登录名的输入信息 }</span>
第三步:添加html代码的onclick或者其他鼠标事件函数,我这里使用的是strust标签,如果你是直接的html标签,相应自定义就好!
<span style="font-size:18px;"><s:textfield name="logonName" id="logonName" maxlength="25" size="20" onblur="checkLogonName()"></s:textfield> </span>到这里我们就创建好ajax引擎,并且可以提交用于检验的输入信息到后台的servlet了
第四步:创建servelt访问数据库,然后编写逻辑代码返回相应的信息(这个就是普通的查询数据库的代码,就不再累赘,我这里设置的返回信息室1或者2,当然你可以自定义)
方法二:采用ajax提交+引入jquery.js的方式实现异步校验
第一步:引入jquery.js,因为ajax提交必须引用jquery.js
<span style="font-size:18px;"><script type="text/javascript" src="js/jquery.js"></script></span>
第二步:创建ajax提交的方法
<span style="font-size:18px;">function PassSubmit(){ var username=document.getElementsByName("username")[0].value; var studentnumber=document.getElementsByName("studentnumber")[0].value; var gender=document.getElementsByName("gender")[0].value; var studentclass=document.getElementsByName("studentclass")[0].value; var studentdormitory=document.getElementsByName("studentdormitory")[0].value; var phonenumber=document.getElementsByName("phonenumber")[0].value; var department=document.getElementsByName("department")[0].value; var description=document.getElementsByName("description")[0].value; if(username==""){ alert("请输入姓名!!"); document.getElementById("username").focus(); return false; }else if(studentnumber==""){ alert("请输入学号!!"); document.getElementById("studentnumber").focus(); return false; }else if (!isSchoolNum(studentnumber)) { alert("您的学号不合法或者您不是新生!!"); document.getElementById("studentnumber").focus(); return false; }else if(studentclass=="未选择"){ alert("请选择班级!!"); document.getElementById("studentclass").focus(); return false; }else if(studentdormitory==""){ alert("请输入宿舍!!"); document.getElementById("studentdormitory").focus(); return false; }else if (!isstudentdormitory(studentdormitory)) { alert("您输入的宿舍不合法!!难道你不住在海花A或B?"); document.getElementById("studentdormitory").focus(); return false; } else if(phonenumber==""){ alert("请输入手机号!!"); return false; }else if (!isMoblie(phonenumber.substring(0, 11))) { alert("您输入的手机号不合法!!"); document.getElementById("phonenumber").focus(); return false; }else if(department=="未选择"){ alert("请选择部门!!"); document.getElementById("department").focus(); return false; }else if(description.length>200){ alert("您输入的文字已经超过100个字了!!"); document.getElementById("description").focus(); return false; } //这部分是主要的方法代码,下面的第三行中的url就是要提交的的servlet的路径 $.ajax({ type:'post', url:'<%=request.getContextPath()%>/RegisterServlet', data:'username='+username+'&studentnumber='+studentnumber+'&gender='+gender+'&studentclass='+studentclass+'&studentdormitory='+studentdormitory+'&phonenumber='+phonenumber+'&department='+department+'&description='+description, success: function(msg) { if ((msg=="fail")) { alert("系统错误,报名失败!请稍后再试!!"); }else if((msg=="success")){ alert("报名成功,你还可以报名其他部门!!"); }else if((msg=="old")){ alert("你已经报名该部门,不能重复报名!!"); } } }); }</span>
第三步:添加html代码的onclick或者其他鼠标事件函数
<span style="font-size:18px;"><input type="submit" id="btn_submit" class="btn" value="提交" onclick="PassSubmit()"> </span>到这里我们就创建好ajax引擎,并且可以提交用于检验的输入信息到后台的servlet了
第四步:创建servelt访问数据库,然后编写逻辑代码返回相应的信息(这个就是普通的查询数据库的代码,就不再累赘,我这里设置的返回信息室fail/uccess/old,当然你可以自定义)
推荐阅读我的另一篇关于博客:通过ajax和form提交转向
相关文章推荐
- 实现session超时后自动跳转到登陆页面(前台JS,JAVA,判断是否Ajax请求)
- ajax前置处理实现异步请求session过期时跳转登录页面
- 创建并部署一个Servlet,要求在实现用户登录功能,当用户名和密码正确时跳转到欢迎页面,否则提示出错信息
- 重写ajax方法实现异步请求session过期时跳转登录页面
- 重写ajax方法实现异步请求session过期时跳转登录页面
- 重写ajax方法实现异步请求session过期时跳转登录页面(转)
- 重写ajax方法实现异步请求session过期时跳转登录页面
- 重写ajax方法实现异步请求session过期时跳转登录页面
- 【Ajax】实现注册页面判断用户名是否可用的提示—异步加载
- 实现依据AJAX的值判断是否提交/跳转页面的方法
- Ajax实现异步刷新验证用户名是否已存在
- Struts 通过拦截器实现登录后跳转到登录前页面 处理普通Http请求和Ajax请求时拦截配置
- Json实现异步请求提交评论无需跳转其他页面
- ajax实现注册页面动态验证用户名是否已注册,不必提交即可验证
- Ajax实现收藏论坛版块功能,并异步返回提示信息
- 【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)
- JQuery+AJAX异步刷新的一个基础应用(检验用户名是否已存在)
- ajax 实现 GET POST 异步 同步 检验mysql连接情况简单实例
- jQuery的ajax()检验用户名;通过jQuery的load()/get()/post()方法实现;使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解