ajax的简单应用：对表单进行预处理

最新推荐文章于 2022-11-18 21:11:16 发布

独醉荏苒

最新推荐文章于 2022-11-18 21:11:16 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： ajax 表单提前验证 ajax表单验证

本文链接：https://blog.csdn.net/neverbe2/article/details/44935889

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做一个网站注册模块的时候，想着用ajax对输入内容进行预处理，在表单提交之前先进行校验，可以提高用户体验。

实现了以后，把ajax部分的代码提取了出来。

demo的目录结构（register.jsp负责显示表单，register.js是ajxa处理，RegisterServlet.java对ajax请求进行预处理）：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/register.js"></script>
<title>注册页面</title>
</head>
<body>
	<form action="" method="post">
		用户名：<input type="text" id="username" name="username" />
		<div id="usernametest"></div>
		<br /><br /><input type="submit" value="submit" />
	</form>
</body>
</html>

window.onload = function(){
	document.getElementById("username").onchange = function(){
		 var username = document.getElementById("username").value;
		 var xhr = ajaxFunction();
		 xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
				if(xhr.status==200||xhr.status==304){
					var data = xhr.responseText;
					document.getElementById("usernametest").innerHTML = data;
				}
			}
		 };
		 //路径后面加一个时间戳，防止浏览器缓存
		 xhr.open("POST","../RegisterServlet?timeStamp="+new Date().getTime(),true);
		 //如果是post请求方式，设置请求首部信息;如果get请求方式，可省略
		 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		 
		 xhr.send("username="+username);
	};
};

function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        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;
 }

RegisterServlet.java对ajax请求进行预处理

response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		String username = request.getParameter("username");
		//判空
		if(username==null || username.trim().equals("")){
			out.println("用户名不能为空");
		} else{
			//判断用户名是否存在，可改作访问数据库查询等操作
			if(username.equals("sun")){
				out.println("用户名已存在");
			} else{
				out.println("可用用户名");
			}
		}