首页 > 代码库 > JQuery学习(5-AJAX)
JQuery学习(5-AJAX)
1. 异步请求用户名是否以注册
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=http://www.mamicode.com/"register" />>
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 = http://www.mamicode.com/$(this).serialize();>
1.4 AJAX调用之前和之后的触发事件:JQuery提供了4中方法通知用户AJAX状态,ajaxStart、ajaxSend、ajaxComplete、ajaxStop。ajaxStart会在AJAX请求发出后尽快被调用,该方法可以绑定到DOM中的任何元素。
ajaxStart会调用模式加载指示器,一旦POST过程完成后,ajaxStop方法被触发,导致模式等待指示器淡出。
$('body').ajaxStart(function(){ })
JQuery学习(5-AJAX)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。