上篇博文已經寫過一篇基於JavaScript來實現的功能的了,但是由於通過JavaScript來實現的話,
代碼量相對較大,而且容易出錯,所以一般使用jQuery來實現,具體實現代碼如下:
$.ajax:
$.ajax({
type :"get",//到後臺服務器端的方式
url : "StudentServlet",//路徑
data : "userName="+userName,//相當於地址欄中StudentServlet?userName="+userName
dataType : "text",//data類型
success : function(data){//回調函數
//接收並處理服務端返回來的數據
if(data=="y"){
$("#span").css("color","green").html("恭喜!該用戶名可用!");
}else{
$("#span").css("color","red").html("該用戶名已被使用!請重新輸入");
}
}
});
$.get與$.post:
兩者大同小異,只是提交到後臺的方式不同。
$.get:
$.get("StudentServlet", {
userName : userName//相當於$.ajaxdata : "userName="+userName
}, function(data) {
if (data == "y") {
$("#span").css("color", "green").html("恭喜!該用戶名可用!");
} else {
$("#span").css("color", "red").html("該用戶名已被使用!請重新輸入");
}
})
$.post:
$.post("StudentServlet", {
userName : userName//相當於$.ajaxdata : "userName="+userName
}, function(data) {
if (data == "y") {
$("#span").css("color", "green").html("恭喜!該用戶名可用!");
} else {
$("#span").css("color", "red").html("該用戶名已被使用!請重新輸入");
}
})