JQuery學習(5-AJAX)

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

1.1 簡單的HTML界面

Register

name taken, please choose another
password must not be blank


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

發佈留言