Maison > Article > interface Web > Vérification de demande asynchrone à l'aide d'Ajax

Vérification de demande asynchrone à l'aide d'Ajax

巴扎黑original: 2017-07-03 10:34:271532parcourir

Description du scénario :

Tout le monde connaît la procédure de connexion, mais si vous souhaitez vous inscrire, vous devez vous assurer que l'identifiant de l'utilisateur ne peut pas être répété. Cette détection de l'ID utilisateur peut être effectuée via Ajax.

Structure du tableau :

<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 (bien sûr, il peut également être configuré comme une action, cela doit être configuré par vous-même, pas nécessairement une 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] vue plaincopy

Détails de l'erreur de la page Web
Message : 'userid' non défini
Ligne : 18
Caractères : 3
Code : 0
URI : http://localhost/demo/14_Ajax/regist.htm
>
→function checkUserid(userid){ // Afficher les informations
Aucun paramètre déclaré

Impossible de participer

si (xmlHttp.status == 200){

alerte("** ***3");

Explication

HTTP

ne fonctionne pas normalement, alors comment revenir à HTTPCode d'état ?

Processus de débogage :

[html ]

voir plaincopy

if (xmlHttp.readyState == 4){ // Retour des données terminé
//alert("*****2");
alerte(xmlHttp);
alerte(xmlHttp.readyState);
alerte(xmlHttp.status);
if (xmlHttp.status
alert("*****3");

xmlHttp.readyState == 4

Le retour est terminé, mais le serveur ne trouve pas la ressource spécifiée () et le document n'existe pas ! Et le débogage du

Servlet

n'est pas du tout saisi. Pourquoi ? ? ?

MLDN Forum Li Qi

Réponse du professeur :

Expliquez votreAJAXLa ressource correspondant au chemin de soumission n'existe pas.

Votre Servlet doit mettre le fichier
class compilé Allez dans le WEB-INF/classes du projet et mettez-le dans le package correspondant. Si elle n'est pas ajoutée, la ressource ne sera pas trouvée. . J'ai à nouveau ce problème : le fichier Servlet.java n'a pas besoin d'être placé dans le dossier

WEB-INF/classes

<.>

! ! ! ! ! ! ! Mais le vôtreb472d9135dbff3dd7fcc77f5995c97d0

4f01b97d64aea37f699ead4eb7bd2bbdOù est-il placé ?

AutresErreur de compilation :

java.lang.ClassNotFoundException : DBDRIVER

Class.forName("DBDRIVER"); // Ne pas charger le pilote

Effet d'affichage :

/* Réimprimé de http://blog.csdn.net/zhangze2/article/details/7959493 */

[html] vue plaincopy

Détails de l'erreur de la page Web
Message : 'userid' non défini
Ligne : 18
Caractères : 3
Code : 0
URI : http://localhost/demo/14_Ajax/regist.htm
>

Impossible de saisir

if (xmlHttp.status == 200) {// http

fonctionnement normal

Alerte ("****** 3") ;

>Si le fonctionnement est anormal, comment renvoyer le HTTP

code d'état ?

Processus de débogage :

[html ]

voir copie en clair

if (xmlHttp.readyState == 4){ >
//alerte("*****2");
alerte(xmlHttp); 🎜>
alerte (xmlHttp.readyState);

alerte (xmlHttp. status); 🎜>
if (xmlHttp.status
== 200){ // Le fonctionnement HTTP est normal

alerte("*****3");

xmlhttp.readyState == 4 Les données sont renvoyées

>

Les données sont renvoyées, mais le serveur ne trouve pas la ressource spécifiée () et le document n'existe pas ! Et le débogage du Servlet
n'est pas du tout saisi. Pourquoi ? ? ?

MLDN Forum Li Qi
Réponse du professeur :

Expliquez votre

AJAXLa ressource correspondant au chemin de soumission n'existe pas.

Votre

Servlet doit mettre le fichier class

compilé Allez dans le WEB-INF/classes du projet et mettez-le dans le package correspondant. Si elle n'est pas ajoutée, la ressource ne sera pas trouvée. . J'ai encore ce problème :
Il n'est pas nécessaire de placer le fichier
Servlet.java dans le dossier WEB-INF/classes

! ! ! ! ! ! ! Mais le vôtreb472d9135dbff3dd7fcc77f5995c97d0

Où est-il placé ?

Autres
Erreur de compilation :
java.lang.ClassNotFoundException : DBDRIVER

Class.forName(
"DBDRIVER"
); // Ne pas charger le pilote ""

Effet d'affichage :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une brève analyse des différences d'utilisation entre Jquery AJAX POST et GETArticle suivant：Une brève analyse des différences d'utilisation entre Jquery AJAX POST et GET

Articles Liés

Voir plus