欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ajax+js 和 Ajax+Jquery实现异步校验

程序员文章站 2022-07-12 20:59:37
...

web.html

<script type="text/javascript" src="${ pageContext.request.contextPath }/03_ajax_regist/regist.js"></script>
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" onblur="checkUsername()"><span id="s1"></span></td>
</tr>
<tr>
<td colspan="2"><input id="regBut" type="submit" value="注册"></td>
</tr>

Servlet.java

		try{
			// 接收参数:
			String username = request.getParameter("username");
			// 调用业务层:
			UserService userService = new UserService();
			User user = userService.findByUsername(username);
			// 判断:
			response.setContentType("text/html;charset=UTF-8");
			if(user == null){
				// 用户名可以使用.
				response.getWriter().println(1);
				//response.getWriter().println("<font color='green'>用户名可以使用</font>");
			}else{
				// 用户名已经被占用
				response.getWriter().println(2);
				//response.getWriter().println("<font color='red'>用户名已经被占用</font>");
			}
		}catch(Exception e){
			e.printStackTrace();
			throw new RuntimeException();
		}

Ajax+js实现异步校验(了解)

    * regist.js

function checkUsername() {
	// 获得文本框的值:
	var username = document.getElementById("username").value;
	// 创建异步对象:
	var xhr = createXMLHttp();
	// 设置监听:
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				var data = xhr.responseText;
				//
				if (data == 1) {
					document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
					document.getElementById("regBut").disabled = false;
				} else if (data == 2) {
					document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被占用</font>";
					document.getElementById("regBut").disabled = true;
				}
			}
		}
	}
	// 打开连接:
	xhr.open("GET", "/day15/ServletDemo2?username=" + username, true);
	// 发送请求:
	xhr.send(null);
}

function createXMLHttp() {
	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;
}

 Ajax+Jquery实现异步校验(必须会)

    * regist.js

$(function(){
	$("#username").blur(function(){
		// 获得文本框的值:
		var username = $(this).val();
		// 演示load方法:
		// $("#s1").load("/day15/ServletDemo3",{"username":username});
		// 演示get/post方法:
		$.get("/day15/ServletDemo3",{"username":username},function(data){
			if(data == 1){
				$("#s1").html("<font color='green'>用户名可以使用</font>");
				$("#regBut").attr("disabled",false);
			}else if(data == 2){
				$("#s1").html("<font color='red'>用户名已经存在</font>");
				$("#regBut").attr("disabled",true);
			}
		});
	});
});
使用load方式,在Servelt中可以直接返回输出的值.

// $("#s1").load("/day15/ServletDemo3",{"username":username});
//response.getWriter().println("<font color='green'>用户名可以使用</font>");