Verwendung von Ajax zur asynchronen Anforderungsüberprüfung-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Verwendung von Ajax zur asynchronen Anforderungsüberprüfung

巴扎黑

Jul 03, 2017 am 10:34 AM

ajax 异步请求

Szenariobeschreibung:

Jeder ist mit dem Anmeldevorgang vertraut, aber wenn Sie sich registrieren möchten, müssen Sie sicherstellen, dass die Benutzer-ID dies nicht kann Diese Erkennung der Benutzer-ID kann über Ajax erfolgen.

Tabellenstruktur:

<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>

Nach dem Login kopieren

Servlet.java (natürlich kann es auch als Aktion konfiguriert werden, dies muss nicht unbedingt von Ihnen selbst konfiguriert werden ein 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();
			}
		}
	}

}

Nach dem Login kopieren

[html] Ansicht Klartext

Webseiten-Fehlerdetails
Nachricht: 'userid' undefiniert
Zeile: 18
Zeichen: 3
Code: 0
URI: http://localhost/demo/14_Ajax/regist.htm
>
→function checkUserid(userid){ // Informationen anzeigen
Keine Parameter deklariert

Eingabe nicht möglich

if (xmlHttp.status == 200){

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

Erklärung

HTTP

funktioniert nicht normal. Wie kann ich also zum HTTPStatuscode zurückkehren?

Debugging-Prozess:

[html ]

Ansicht Klartext

if (xmlHttp.readyState == 4){ // Datenrückgabe abgeschlossen
//alert("*****2"); 🎜>
Alert(xmlHttp);
Alert(xmlHttp.readyState);
Alert(xmlHttp.status);
if (xmlHttp.status
warning("*****3"); 🎜>
xmlHttp.readyState == 4 Beschreibungsdatenrückgabe abgeschlossen

Daten Die Rückgabe ist abgeschlossen, aber der Server kann die angegebene Ressource () nicht finden und das Dokument existiert nicht! Und das Servlet-Debugging ist überhaupt nicht eingetragen. ? ?

MLDN-Forum Li QiAntwort des Lehrers:

Erklären Sie IhrAJAXDie dem Übermittlungspfad entsprechende Ressource existiert nicht.
Ihr Servlet muss die kompilierte Datei Klasse ablegen. Gehen Sie zu WEB-INF/classes Verzeichnis des Projekts und fügen Sie es in das entsprechende Paket ein. Wenn es nicht hinzugefügt wird, wird die Ressource

nicht gefunden . Ich hatte wieder dieses Problem: Die Datei

Servlet.java muss nicht im Ordner WEB-INF/classes abgelegt werden 🎜>

! ! ! ! ! ! ! Aber deine

Wo ist es platziert?

AndereKompilierungsfehler:

java.lang.ClassNotFoundException: DBDRIVER Class.forName(
"DBDRIVER"
); // Laden Sie den Treiber nicht
""
Anzeigeeffekt:

/* Nachdruck von http://blog.csdn.net/zhangze2/article/details/7959493 */

[html] Ansicht Klartext
1. Webseiten-Fehlerdetails
3. Nachricht: 'userid' undefiniert
4. Zeile: 18
5. Zeichen: 3
6. Code: 0
7. URI: http://localhost/demo/14_Ajax/regist.htm
8. >
Kann nicht eingegeben werden

if (xmlHttp.status == 200) {// http
normaler Betrieb
Warnung ("****** 3");
Statuscode?
Debugging-Prozess:

[html ]
Ansicht Klarschrift
1. if (xmlHttp.readyState == 4){ >
3. Alert(xmlHttp.readyState);
4. Alert(xmlHttp. Status);
5. if (
  xmlHttp.status == 200){ // HTTP-Betrieb ist normal
6. Alert("*****3");
xmlhttp.readyState == 4
Die Daten werden zurückgegeben

>
Die Daten werden zurückgegeben, aber der Server kann die angegebene Ressource () nicht finden und Das Dokument existiert nicht! Und das
Servlet-Debugging ist überhaupt nicht eingetragen. ? ?

MLDN-Forum Li Qi
Antwort des Lehrers:
Erklären Sie Ihr
AJAX

Die dem Übermittlungspfad entsprechende Ressource existiert nicht.

Ihr
Servlet
muss die kompilierte Datei Klasse ablegen. Gehen Sie zu WEB-INF/classes
Verzeichnis des Projekts und fügen Sie es in das entsprechende Paket ein. Wenn es nicht hinzugefügt wird, wird die Ressource nicht gefunden . Ich habe wieder dieses Problem: Die Datei

Servlet.java muss nicht im Ordner WEB-INF/classes

! ! ! ! ! ! ! Aber deine

Wo ist es platziert?
AndereKompilierungsfehler:

java.lang.ClassNotFoundException: DBDRIVER Class.forName(

"DBDRIVER"); // Laden Sie den Treiber nicht

""Anzeigeeffekt:

Das obige ist der detaillierte Inhalt vonVerwendung von Ajax zur asynchronen Anforderungsüberprüfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7478

CakePHP-Tutorial

1377

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt Feb 20, 2024 am 10:07 AM

Titel: Methoden und Codebeispiele zur Behebung von 403-Fehlern in jQuery-AJAX-Anfragen. Der 403-Fehler bezieht sich auf eine Anfrage, dass der Server den Zugriff auf eine Ressource verbietet. Dieser Fehler tritt normalerweise auf, weil der Anfrage die Berechtigungen fehlen oder sie vom Server abgelehnt wird. Wenn Sie jQueryAJAX-Anfragen stellen, stoßen Sie manchmal auf diese Situation. In diesem Artikel wird erläutert, wie dieses Problem gelöst werden kann, und es werden Codebeispiele bereitgestellt. Lösung: Berechtigungen prüfen: Stellen Sie zunächst sicher, dass die angeforderte URL-Adresse korrekt ist und stellen Sie sicher, dass Sie über ausreichende Berechtigungen für den Zugriff auf die Ressource verfügen.

So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage Feb 19, 2024 pm 05:55 PM

jQuery ist eine beliebte JavaScript-Bibliothek zur Vereinfachung der clientseitigen Entwicklung. AJAX ist eine Technologie, die asynchrone Anfragen sendet und mit dem Server interagiert, ohne die gesamte Webseite neu zu laden. Wenn Sie jedoch jQuery zum Senden von AJAX-Anfragen verwenden, treten manchmal 403-Fehler auf. Bei 403-Fehlern handelt es sich in der Regel um vom Server verweigerte Zugriffsfehler, möglicherweise aufgrund von Sicherheitsrichtlinien oder Berechtigungsproblemen. In diesem Artikel besprechen wir, wie Sie bei einer jQueryAJAX-Anfrage den Fehler 403 beheben können

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:

Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden? Feb 23, 2024 pm 04:27 PM

Wie kann das Problem des jQueryAJAX-Fehlers 403 gelöst werden? Bei der Entwicklung von Webanwendungen wird jQuery häufig zum Senden asynchroner Anfragen verwendet. Allerdings kann bei der Verwendung von jQueryAJAX manchmal der Fehlercode 403 auftreten, der darauf hinweist, dass der Zugriff vom Server verboten ist. Dies wird normalerweise durch serverseitige Sicherheitseinstellungen verursacht, es gibt jedoch Möglichkeiten, das Problem zu beheben. In diesem Artikel wird erläutert, wie Sie das Problem des jQueryAJAX-Fehlers 403 lösen können, und es werden spezifische Codebeispiele bereitgestellt. 1. machen

PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine Jun 02, 2024 pm 08:39 PM

Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.

Erweiterter Leitfaden zu Python Asyncio: Vom Anfänger zum Experten Mar 04, 2024 am 09:43 AM

Gleichzeitige und asynchrone Programmierung Bei der gleichzeitigen Programmierung geht es um die gleichzeitige Ausführung mehrerer Aufgaben. Bei der asynchronen Programmierung handelt es sich um eine Art der gleichzeitigen Programmierung, bei der Aufgaben keine Threads blockieren. asyncio ist eine Bibliothek für die asynchrone Programmierung in Python, die es Programmen ermöglicht, I/O-Vorgänge auszuführen, ohne den Hauptthread zu blockieren. Ereignisschleife Der Kern von Asyncio ist die Ereignisschleife, die I/O-Ereignisse überwacht und entsprechende Aufgaben plant. Wenn eine Coroutine bereit ist, wird sie von der Ereignisschleife ausgeführt, bis sie auf E/A-Operationen wartet. Anschließend wird die Coroutine angehalten und die Ausführung anderer Coroutinen fortgesetzt. Coroutinen Coroutinen sind Funktionen, die die Ausführung anhalten und fortsetzen können. Das Schlüsselwort asyncdef wird zum Erstellen von Coroutinen verwendet. Die Coroutine verwendet das Schlüsselwort „await“, um auf den Abschluss des E/A-Vorgangs zu warten. Die folgenden Grundlagen von Asyncio

PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript and XML) ermöglicht das Hinzufügen dynamischer Inhalte, ohne die Seite neu laden zu müssen. Mit PHP und Ajax können Sie eine Produktliste dynamisch laden: HTML erstellt eine Seite mit einem Containerelement und die Ajax-Anfrage fügt die Daten nach dem Laden zum Element hinzu. JavaScript verwendet Ajax, um über XMLHttpRequest eine Anfrage an den Server zu senden, um Produktdaten im JSON-Format vom Server abzurufen. PHP nutzt MySQL, um Produktdaten aus der Datenbank abzufragen und in das JSON-Format zu kodieren. JavaScript analysiert die JSON-Daten und zeigt sie im Seitencontainer an. Durch Klicken auf die Schaltfläche wird eine Ajax-Anfrage zum Laden der Produktliste ausgelöst.

PHP und Ajax: Möglichkeiten zur Verbesserung der Ajax-Sicherheit Jun 01, 2024 am 09:34 AM

Um die Ajax-Sicherheit zu verbessern, gibt es mehrere Methoden: CSRF-Schutz: Generieren Sie ein Token und senden Sie es an den Client. Fügen Sie es der Serverseite in der Anforderung zur Überprüfung hinzu. XSS-Schutz: Verwenden Sie htmlspecialchars(), um Eingaben zu filtern und das Einschleusen böswilliger Skripte zu verhindern. Content-Security-Policy-Header: Beschränken Sie das Laden schädlicher Ressourcen und geben Sie die Quellen an, aus denen Skripte und Stylesheets geladen werden dürfen. Validieren Sie serverseitige Eingaben: Validieren Sie von Ajax-Anfragen empfangene Eingaben, um zu verhindern, dass Angreifer Eingabeschwachstellen ausnutzen. Verwenden Sie sichere Ajax-Bibliotheken: Profitieren Sie von automatischen CSRF-Schutzmodulen, die von Bibliotheken wie jQuery bereitgestellt werden.

See all articles