ajax实现异步请求,不跳转页面的情况下,达到检验用户名等信息是否效果的功能!

前端之家收集整理的这篇文章主要介绍了ajax实现异步请求,不跳转页面的情况下,达到检验用户名等信息是否效果的功能!前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们在用户注册页面时常常要考虑到登录名不能重复的问题,然而解决这个问题的方式有很多,可以采用from表单提交然后重定向方法来实现,甚至于我们可以采用iframe的布局框架也能实现,但是我更加推崇的是使用ajax的方法。下面我就详细介绍使用ajax的方式来实现异步校验的功能

方法一:通过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提交转向

原文链接:https://www.f2er.com/ajax/164359.html

猜你在找的Ajax相关文章