标签：ajax 异步校验 jsp strust javaweb
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">我们在用户注册页面时常常要考虑到登录名不能重复的问题，然而解决这个问题的方式有很多，可以采用from表单提交然后重定向等方法来实现，甚至于我们可以采用iframe的布局框架也能实现，但是我更加推崇的是使用ajax的方法。下面我就详细介绍使用ajax的方式来实现异步校验的功能：</span>
方法一：通过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><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;"><span style="white-space:pre"> </span>//<span style="color:#ff0000;">data是后台反馈回来的信息，我这里的后台是放回1,2的数字，你可以自定义</span>
if(data==1){
alert("当前输入的登录名["+logonName+"]已被其他人占用，请重重新输入！");
document.getElementById("logonName").value = "";
document.getElementById("logonName").focus();
}
}
}
}
//第三步：与后台服务器建立一个连接
xmlHttp.open("post","<span style="color:#3366ff;">../../CheckLogonName</span>",true);//<span style="color:#ff0000;">蓝色部分为我们访问servlet的路径</span>
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第四步：发送请求的参数
xmlHttp.send("logonName="+logonName); //<span style="color:#ff0000;">提交我们用于数据库校验的登录名的输入信息</span>
}</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
<script type="text/javascript" src="js/jquery.js"></script>
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;
}
//<span style="color:#ff0000;">这部分是主要的方法代码，下面的第三行中的url就是要提交的的servlet的路径</span>
<span style="color:#3333ff;"> $.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提交转向
ajax实现异步请求，不跳转页面的情况下，达到检验用户名等信息是否效果的功能！
标签：ajax 异步校验 jsp strust javaweb
原文地址：http://blog.csdn.net/wanghaiping1993/article/details/39608943
