Rumah hujung hadapan web tutorial js 利用ajax进行异步请求验证

利用ajax进行异步请求验证

Jul 03, 2017 am 10:34 AM
ajax tak segerak bertanya

 场景描述:

登录程序大家都不陌生,但如果要注册,则必须保证用户的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>
Salin selepas log masuk

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

}
Salin selepas log masuk



 



[html] view plaincopy


  1. 网页错误详细信息  

  2.   

  3. 消息: 'userid' 未定义  

  4. 行: 18  

  5. 字符: 3  

  6. 代码: 0  

  7. URI: http://localhost/demo/14_Ajax/regist.htm  

  8.   

  9.   

  10. function checkUserid(userid){      // 显示信息  

  11. 没有声明参数  


不能进入

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

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

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

调试过程:



[html] view plaincopy


  1. if (xmlHttp.readyState == 4){           // 数据返回完毕  

  2.             //alert("*****2");  

  3.             alert(xmlHttp);  

  4.             alert(xmlHttp.readyState);  

  5.             alert(xmlHttp.status);  

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

  7.                 alert("*****3");  


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

 

数据返回完毕,但服务器找不到指定的资源(),文档不存在!而且Servlet调试根本未进入,这是为什么???


MLDN论坛李祺老师解答:

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

我又出这样的问题:

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

!!!!!!!但你的

                    zz.ajax.CheckServlet

             是放哪?

 

其它编译错误:

java.lang.ClassNotFoundException: DBDRIVER

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

显示效果:

 


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


 



[html] view plaincopy


  1. 网页错误详细信息  

  2.   

  3. 消息: 'userid' 未定义  

  4. 行: 18  

  5. 字符: 3  

  6. 代码: 0  

  7. URI: http://localhost/demo/14_Ajax/regist.htm  

  8.   

  9.   

  10. function checkUserid(userid){      // 显示信息  

  11. 没有声明参数  


不能进入

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

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

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

调试过程:



[html] view plaincopy


  1. if (xmlHttp.readyState == 4){           // 数据返回完毕  

  2.             //alert("*****2");  

  3.             alert(xmlHttp);  

  4.             alert(xmlHttp.readyState);  

  5.             alert(xmlHttp.status);  

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

  7.                 alert("*****3");  


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

 

数据返回完毕,但服务器找不到指定的资源(),文档不存在!而且Servlet调试根本未进入,这是为什么???


MLDN论坛李祺老师解答:

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

我又出这样的问题:

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

!!!!!!!但你的

                    zz.ajax.CheckServlet

             是放哪?

 

其它编译错误:

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 Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX Feb 20, 2024 am 10:07 AM

Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.

Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403 Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403 Feb 19, 2024 pm 05:55 PM

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Mar 09, 2024 pm 05:36 PM

Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:

Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403? Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403? Feb 23, 2024 pm 04:27 PM

Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat

PHP dan Ajax: Membina enjin cadangan autolengkap PHP dan Ajax: Membina enjin cadangan autolengkap Jun 02, 2024 pm 08:39 PM

Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Kes praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.

Panduan Lanjutan untuk Python asyncio: Dari Pemula kepada Pakar Panduan Lanjutan untuk Python asyncio: Dari Pemula kepada Pakar Mar 04, 2024 am 09:43 AM

Pengaturcaraan Serentak dan Tak Segerak Pengaturcaraan serentak berurusan dengan berbilang tugas yang dilaksanakan secara serentak, pengaturcaraan tak segerak ialah sejenis pengaturcaraan serentak di mana tugasan tidak menyekat benang. asyncio ialah perpustakaan untuk pengaturcaraan tak segerak dalam python, yang membolehkan atur cara melaksanakan operasi I/O tanpa menyekat utas utama. Gelung peristiwa Teras asyncio ialah gelung peristiwa, yang memantau peristiwa I/O dan menjadualkan tugas yang sepadan. Apabila coroutine sedia, gelung acara melaksanakannya sehingga ia menunggu operasi I/O. Ia kemudian menjeda coroutine dan terus melaksanakan coroutine lain. Coroutines Coroutines ialah fungsi yang boleh menjeda dan menyambung semula pelaksanaan. Kata kunci asyncdef digunakan untuk membuat coroutine. Coroutine menggunakan kata kunci tunggu untuk menunggu operasi I/O selesai. Asas asyncio berikut

PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik Jun 06, 2024 pm 01:12 PM

Ajax (JavaScript Asynchronous dan XML) membenarkan menambah kandungan dinamik tanpa memuatkan semula halaman. Menggunakan PHP dan Ajax, anda boleh memuatkan senarai produk secara dinamik: HTML mencipta halaman dengan elemen kontena dan permintaan Ajax menambah data pada elemen selepas memuatkannya. JavaScript menggunakan Ajax untuk menghantar permintaan kepada pelayan melalui XMLHttpRequest untuk mendapatkan data produk dalam format JSON daripada pelayan. PHP menggunakan MySQL untuk menanyakan data produk daripada pangkalan data dan mengekodnya ke dalam format JSON. JavaScript menghuraikan data JSON dan memaparkannya dalam bekas halaman. Mengklik butang mencetuskan permintaan Ajax untuk memuatkan senarai produk.

PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax Jun 01, 2024 am 09:34 AM

Untuk meningkatkan keselamatan Ajax, terdapat beberapa kaedah: Perlindungan CSRF: menjana token dan menghantarnya kepada pelanggan, menambahnya ke bahagian pelayan dalam permintaan untuk pengesahan. Perlindungan XSS: Gunakan htmlspecialchars() untuk menapis input bagi mengelakkan suntikan skrip berniat jahat. Pengepala Kandungan-Keselamatan-Dasar: Hadkan pemuatan sumber berniat jahat dan nyatakan sumber dari mana skrip dan helaian gaya dibenarkan untuk dimuatkan. Sahkan input sisi pelayan: Sahkan input yang diterima daripada permintaan Ajax untuk menghalang penyerang daripada mengeksploitasi kelemahan input. Gunakan perpustakaan Ajax yang selamat: Manfaatkan modul perlindungan CSRF automatik yang disediakan oleh perpustakaan seperti jQuery.

See all articles