JQuery學習(5-AJAX)
阿新 • • 發佈:2017-05-09
inline class choose ajaxstop pre 綁定 1.2 設置 返回
1.4 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(){ })
JQuery學習(5-AJAX)