JQuery學習(5-AJAX)

標籤：類型   this   序列化   win   序列   hid   erro   dea   upd   

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

JQuery學習(5-AJAX)