JQuery学习(5-AJAX)

    1. 异步请求username是否以注冊

    1.1 简单的HTML界面

<div id="registerWindow" class="registerModal">
            <h2>Register</h2>
            <form name="register" id="registerForm" action="" method="post">
                <label class="labelLong" for="penewuser">Please choose a user name: </label><input type="text" name="penewuser" id="penewuser" size="24" /><span class="error">name taken, please choose another</span><br />
                <label class="labelLong" for="penewpass">Please choose a password: </label><input type="password" name="penewpass" id="penewpass" size="24" /><span class="error">password must not be blank</span><br />
                <label class="label" for="pefirstname">First Name: </label><input type="text" name="pefirstname" id="pefirstname" size="16" /><br />
                <label class="label" for="pelastname">Last Name: </label><input type="text" name="pelastname" id="pelastname" size="24" /><br />
                <label class="label" for="email">E-mail: </label><input type="text" name="email" id="email" size="48" /><span class="error">please enter a valid e-mail address</span><br />
                <h3>Photography Interests<span class="modalNote"> (choose all that apply)</span></h3>
                <input type="hidden" name="formName" value="register" />
                <label class="label"> </label><input type="submit" value="Register" /><input type="reset" value="Clear" />
                <p class="modalNote">You can update your interests at any time by modifying settings in "My Account".</p>
            </form>
        </div>

   

    1.2 绑定事件到文本框失去焦点。使用POST方式提交请求。

     ：參数1设定异步请求的路径。參数2传递了提交的数据，且数据键值对中值须要引號。參数3对server返回的数据进行处理。參数4设置server端返回的数据类型。

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