Rumah > Artikel > hujung hadapan web > 利用ajax进行异步请求验证

利用ajax进行异步请求验证

巴扎黑asal: 2017-07-03 10:34:271532semak imbas

场景描述：

登录程序大家都不陌生，但如果要注册，则必须保证用户的ID不能重复，这种检测用户ID的操作可以通过Ajax完成。

表结构：

<html>
<head><title>异步验证</title></head>
<body>
<script language="JavaScript">
	var xmlHttp;
	var flag;
	function createXMLHttp(){
		if (window.XMLHttpRequest){						// 创建XMLHttpRequest核心对象
			xmlHttp = new XMLHttpRequest()					// 使用FireFox内核
		}else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");	// 使用IE内核的浏览器
		}
	}

	function checkUserid(userid){		// 显示信息
		createXMLHttp();	//
		// 设置请求,通过地址重写方式将userid传递到JSP中
		
		xmlHttp.open("POST","CheckServlet?userid="+userid);
		// 设置完请求后调用处理回调函数
		xmlHttp.onreadystatechange = checkUseridCallback;
		xmlHttp.send(null);	// 发送请求，不设置参数
		//document.getElementById("msg").innerHTML = "正在验证……";
				//alert("*******");

	}

	function checkUseridCallback(){	// 回调函数
		if (xmlHttp.readyState == 4){			// 数据返回完毕
			if (xmlHttp.status == 200){			// HTTP操作正常
				alert("*****8");
				var text = xmlHttp.responseText;// 接收返回内容
				if (text == "true"){
					flag = false;				// 无法提交表单
					document.getElementById("msg").innerHTML = "用户名ID重复，无法使用";
				}else {
					flag = true;				// 可以提交表单
					document.getElementById("msg").innerHTML = "恭喜！此用户ID可以注册";
				}
			}
		}
	}

	function checkForm(){	// 对表单判断能否进行提交操作
		return flag;
	}
</script>
	<form action="xxx.jsp" method="post" onsubmit="return checkForm()">
		用户ID：<input type="text" name="userid" onblur="checkUserid(this.value)"><span id="msg"></span><br>
		姓  名：<input type="text" name="name"><br>
		密  码：<input type="password" name="password"><br>
		<input type="submit" value="注册">
		<input type="reset" value="重置">
	</form>
</body>
<html>

Servlet.java（当然也可以配置成action，这个需要自己配置，不一定是要servlet的）

package zz.ajax;
import java.io.*;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.PreparedStatement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet extends HttpServlet{
	public static final String DBDRIVER = "org.gjt.mm.mysql.Driver";
	public static final String DBURL = "jdbc:mysql://localhost:3306/zz";
	public static final String DBUSER = "root";
	public static final String DBPASSWORD = "mysql";

	public void doGet(HttpServletRequest request, HttpServletResponse response)
               throws ServletException,java.io.IOException{
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
               throws ServletException,java.io.IOException{
		request.setCharacterEncoding("GBK");
		response.setContentType("text/html");		// 设置回应的MIME
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		PrintWriter out = response.getWriter();		// 接收验证的userid
		String userid = request.getParameter("userid");
		try{
			Class.forName(DBDRIVER);	// 加载驱动
			conn = DriverManager.
				getConnection(DBURL, DBUSER, DBPASSWORD);	// 连接数据库

			String sql = "SELECT COUNT(userid) FROM user WHERE userid=?";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userid);
			rs = pstmt.executeQuery();
			System.out.printf("*********");
			if (rs.next()){
				if (rs.getInt(1) > 0){		// 判断ID是否已存在
					out.print("true");		// 已存在
				}else {
					out.print("false");
				}
			}
			out.close();
			
		}catch (Exception e){
			e.printStackTrace();
		}finally {
			try{
				conn.close();
			}catch (Exception e){
				e.printStackTrace();
			}
		}
	}

}

[html] view plaincopy

网页错误详细信息
消息: 'userid' 未定义
行: 18
字符: 3
代码: 0
URI: http://localhost/demo/14_Ajax/regist.htm
function checkUserid(userid){ // 显示信息
没有声明参数

不能进入

if (xmlHttp.status == 200){ // HTTP操作正常

alert("*****3");

说明HTTP操作不正常，那怎么返回HTTP状态码？

调试过程：

[html] view plaincopy

if (xmlHttp.readyState == 4){ // 数据返回完毕
//alert("*****2");
alert(xmlHttp);
alert(xmlHttp.readyState);
alert(xmlHttp.status);
if (xmlHttp.status == 200){ // HTTP操作正常
alert("*****3");

xmlHttp.readyState == 4 说明数据返回完毕

数据返回完毕，但服务器找不到指定的资源（），文档不存在！而且Servlet调试根本未进入，这是为什么？？？

MLDN论坛李祺老师解答：

说明你的AJAX提交路径对应的资源不存在。
你的Servlet必须将编译后的class文件放到项目的WEB-INF/classes目录下，并放到对应的包中，如果没有加入，则会找不到资源

我又出这样的问题：

Servlet.java文件不必放在WEB-INF/classes文件夹下

！！！！！！！但你的b472d9135dbff3dd7fcc77f5995c97d0

zz.ajax.CheckServlet

4f01b97d64aea37f699ead4eb7bd2bbd是放哪？

其它编译错误：

java.lang.ClassNotFoundException: DBDRIVER

Class.forName("DBDRIVER"); // 加载驱动不要“”

显示效果：

/* 转载自http://blog.csdn.net/zhangze2/article/details/7959493 */

[html] view plaincopy

网页错误详细信息
消息: 'userid' 未定义
行: 18
字符: 3
代码: 0
URI: http://localhost/demo/14_Ajax/regist.htm
function checkUserid(userid){ // 显示信息
没有声明参数

不能进入

if (xmlHttp.status == 200){ // HTTP操作正常

alert("*****3");

说明HTTP操作不正常，那怎么返回HTTP状态码？

调试过程：

[html] view plaincopy

if (xmlHttp.readyState == 4){ // 数据返回完毕
//alert("*****2");
alert(xmlHttp);
alert(xmlHttp.readyState);
alert(xmlHttp.status);
if (xmlHttp.status == 200){ // HTTP操作正常
alert("*****3");

xmlHttp.readyState == 4 说明数据返回完毕

数据返回完毕，但服务器找不到指定的资源（），文档不存在！而且Servlet调试根本未进入，这是为什么？？？

MLDN论坛李祺老师解答：

我又出这样的问题：

Servlet.java文件不必放在WEB-INF/classes文件夹下

！！！！！！！但你的b472d9135dbff3dd7fcc77f5995c97d0

zz.ajax.CheckServlet

4f01b97d64aea37f699ead4eb7bd2bbd是放哪？

其它编译错误：

java.lang.ClassNotFoundException: DBDRIVER

Class.forName("DBDRIVER"); // 加载驱动不要“”

显示效果：

Atas ialah kandungan terperinci 利用ajax进行异步请求验证. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：浅析Jquery AJAX POST与GET之间的用法区别Artikel seterusnya：AJAX实现简单的注册页面异步请求实例代码

Artikel berkaitan

Lihat lagi