JQuery學習(5-AJAX)

1. 異步請求用戶名是否以註冊

1.1 簡單的HTML界面

            
Register
            
                Please choose a user name: name taken, please choose another

                Please choose a password: password must not be blank

                First Name: 

                Last Name: 

                E-mail: please enter a valid e-mail address

                
Photography Interests (choose all that apply)
                
                 
                
You can update your interests at any time by modifying settings in "My Account".
            
        

1.2 綁定事件到文本框失去焦點，使用POST方式提交請求。

：參數1設定異步請求的路徑；參數2傳遞瞭提交的數據，且數據鍵值對中值需要引號；參數3對服務器返回的數據進行處理；參數4設置服務器端返回的數據類型；

$('#penewuser').blur(function() {
	    var newName = $(this).val();
	    $.post('inc/peRegister.php', {
	        formName: 'register',
	        penewuser: newName
	    }, function(data){
	    	var usernameCount = data;
	    	if(1 == usernameCount){
	    		$('#penewuser').next('.error').css('display', 'inline');
	    	} else {
	    		$('#penewuser').next('.error').css('display', 'none');
	    	}
		}, 'html');
	});

1.3 異步提交FORM表單。

：取消submit的默認操作，然後序列化表單數據。

	$('#registerForm').submit(function(e) {
		e.preventDefault();
		var formData = $(this).serialize();
		$.post('inc/peRegister.php', formData, function(data) {	
			var mysqlError = data;
			if(mysqlError > 0){
		        /*
		         *  error deal
		         */
		}, 'html');
	});

1.4 AJAX調用之前和之後的觸發事件

：JQuery提供瞭4中方法通知用戶AJAX狀態，ajaxStart、ajaxSend、ajaxComplete、ajaxStop。ajaxStart會在AJAX請求發出後盡快被調用，該方法可以綁定到DOM中的任何元素。

ajaxStart會調用模式加載指示器，一旦POST過程完成後，ajaxStop方法被觸發，導致模式等待指示器淡出。

 $('body').ajaxStart(function(){
})