JQuery+Ajax 使用JQuery完成非同步使用者名稱的校驗

案例：在註冊頁面中,當輸入了使用者名稱之後,游標離開文字框,顯示使用者名稱是否已經存在.

【Jquery的AJAX部分的概述】

由於傳統AJAX開發程式碼比較麻煩,而且還有瀏覽器相容的問題.傳統的AJAX的使用在企業中是很少的.使用AJAX的一些框架完成.

 

JQuery的AJAX部分的API：

* $(“”).load(url,data,function(){});

* $.get(url,data,function(){},dataType);

* $.post(url,data,function(){},dataType);

* $.ajax();

【Jquery的AJAX的部分的使用】

引入JQuery的JS.

【Jquery的AJAX的部分的入門】

// jquery的load方法
$(function(){
	// 給按鈕1繫結一個click事件：
	$("#bt1").click(function(){
		$("#d1").load("/WEB15/ServletDemo4",{"name":"張三","password":"123"},function(data){
			if(data == 1){
				$(this).html("張三");
			}else{
				$(this).html("其他");
			}
		});
	});
});

// 使用jquery的get方法:
$(function(){
	$("#bt2").click(function(){
		$.get("/WEB15/ServletDemo4",{"name":"李四","password":"345"},function(data){
			$("#d2").html(data);
		});
	});
});

//使用jquery的post方法:
$(function(){
	$("#bt3").click(function(){
		$.post("/WEB15/ServletDemo4",{"name":"王五","password":"456"},function(data){
			$("#d3").html(data);
		});
	});
});

// 使用jquery的ajax方法:
$(function(){
	$("#bt4").click(function(){
		$.ajax({
			type:"post",
			url:"/WEB15/ServletDemo4",
			data:"name=aaa&password=123",
			success:function(data){
				$("#d4").html(data);
			}
			
		});
	});
});

查詢使用者名稱是否被佔用，程式碼實現：

$(function(){
	// 給使用者名稱的文字框繫結一個事件：
	$("#username").blur(function(){
		// 獲得文字框的值:document.getELementById().value;
		var username = $(this).val();
		// 使用jquery的ajax的操作非同步傳送請求.
		$.post("/WEB15/ServletDemo3",{"username":username},function(data){
			if(data==1){
				// 使用者名稱可以使用
				$("#s1").html("<font color='green'>使用者名稱可以使用</font>");
				$("#regBut").prop("disabled",false);
			}else if(data==2){
				// 使用者名稱已經存在
				$("#s1").html("<font color='red'>使用者名稱已經被佔用</font>");
				$("#regBut").prop("disabled",true);
			}
		});
	});
});