利用ajax进行异步请求验证
- 巴扎黑原创
- 2017-07-03 10:34:271537浏览
场景描述：
登录程序大家都不陌生，但如果要注册，则必须保证用户的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论坛李祺老师解答：
说明你的AJAX提交路径对应的资源不存在。
你的Servlet必须将编译后的class文件放到项目的WEB-INF/classes目录下，并放到对应的包中，如果没有加入，则会找不到资源
我又出这样的问题：
Servlet.java文件不必放在WEB-INF/classes文件夹下
！！！！！！！但你的b472d9135dbff3dd7fcc77f5995c97d0
zz.ajax.CheckServlet
4f01b97d64aea37f699ead4eb7bd2bbd是放哪？
其它编译错误：
java.lang.ClassNotFoundException: DBDRIVER
Class.forName("DBDRIVER"); // 加载驱动 不要“”
显示效果：
以上是利用ajax进行异步请求验证的详细内容。更多信息请关注PHP中文网其他相关文章！