Ajax初学姓名验证测试

最新推荐文章于 2021-08-05 12:19:02 发布

wangning8075

最新推荐文章于 2021-08-05 12:19:02 发布

阅读量145

点赞数

分类专栏： Ajax 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/ning_vina/article/details/84717444

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax编程(1)get请求方式

客户端代码：

	<script type="text/javascript" src="js/my.js">
	</script>
	<script type="text/javascript">
	   function check_username(){
		   //获得XMLHttpRequest对象
		     var xhr = getXhr();
		   //发送请求
		    var uri = "check_username.do?username="+$F('username');
		    xhr.open('get',uri,true);
		    xhr.onreadystatechange = function(){
		    	if(xhr.readyState == 4){
		    		if(xhr.status == 200){
		    			//服务器处理请求，返回数据
		    		    //处理返回数据
		    		    var txt = xhr.responseText;
		    		    $('username_msg').innerHTML = txt;
		    		}else{
		    			$('username_msg').innerHTML = "验证用户名出错";
		    		}
		    	}
		    }
		   
		   xhr.send(null);
	   }
	   
	</script>
	
	</head>
	<body style="font-size:30px;font-style:italic;">
		<form action="regist.do" method="get">
			<fieldset>
				<legend>注册</legend>
				用户名:<input id="username" 
				name="username" 
				οnblur="check_username();"/>
				<span class="s1" id="username_msg"></span>
				<br/>
				真实姓名:<input name="name"/><br/>
				<input type="submit" value="提交"/>
			</fieldset>
		</form>
	</body>
</html>

服务器端代码

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		String uri = request.getRequestURI();
		String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
		System.out.println(action);
		
		if(action.equals("/check_username")){
			String username = request.getParameter("username");
			System.out.println("test...");
			System.out.println(username);
			if(username.equals("wn")){
				out.print("姓名别占用");
			}else{
				out.print("姓名可以使用");
			}
		}
		
	}

（2）Post请求方式

服务器端处理方式一样，客户端处理函数稍微有点差别，具体见下

 function check_username_post(){
		   //获取Ajax对象
		     var xhr = getXhr();
		   //发送请求
		   xhr.open('post','check_username.do',true);
		   //设置头信息
		   xhr.setRequestHeader('content-type',
				'application/x-www-form-urlencoded');
		   xhr.onreadystatechange = function(){
		    	if(xhr.readyState == 4){
		    		if(xhr.status == 200){
		    			//服务器处理请求，返回数据
		    		    //处理返回数据
		    		    var txt = xhr.responseText;
		    		    $('username_msg').innerHTML = txt;
		    		}else{
		    			$('username_msg').innerHTML = "验证用户名出错";
		    		}
		    	}
		    }
		   xhr.send('username=' + $F('username'));
	   }

wangning8075

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax初学姓名验证测试

Ajax编程(1)get请求方式客户端代码： &lt;script type="text/javascript" src="js/my.js"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; function check_username(){ //获得XMLHttpRequest对象..
复制链接

扫一扫