jQuery中使用ajax對表單數據進行異步驗證

在網頁中使用Ajax可以讓網頁的響應更快,通過異步地向服務器發送請求,不需要重新載入頁面,提升了用戶的體驗。

在jQuery中使用Ajax基本格式為:

$('#button').click(function(){
	var data = $('.username').val();
	$.ajax({
		type:"POST",
		url:"validate.php",
		data: data,
		success: function(html) {
			$(#id).html(html);
		}
	});
	return false;
});

Type:定義了HTTP方法的字符串,可以是GET和POST類型,默認為GET; url:需要訪問的網頁地址字符串; data:一個map對象或者字符串,需要發送給服務器的數據; success:回調函數,從服務器返回的數據會賦給這個回調函數的參數; 最后我們使用return false;從而抑制了瀏覽器的默認點擊行為,因為這里是通過jQuery代碼執行動作的。

下面就通過Ajax驗證用戶輸入的數據,把結果顯示在網頁上:
首先是html表單如下:
<form id="register" method="post" action="">
	<span class="tips">請輸入你的用戶名:</span>
	<input type="text" name="username" class="username" />
		<span class="result"></span><br />
	<input type="submit" id="submit" />
</form>
jQuery代碼如下:
$(document).ready(function() {
	$('.result').hide();
	$('#submit').click(function(){
		var username = $('.username').val();
		var data = 'username=' +username;
		$.ajax({
			type:"POST",
			url:"validate.php",
			data:data,
			success:function(html) {
				$('.result').show();
				$('.result').text(html);
			}
		});
		return false;
	});
});
服務器端執行腳本如下:
<?php
	$username = $_POST['username'];
	//正確的用戶名由小寫字母,數字和下劃線組成
	if(!eregi("^[a-z0-9_]+$", $username)){
		echo "用戶名格式不正確!".$username;
	} else {
		echo "恭喜,這是合法的用戶名!";
	}
?>