JQuery学习(5-AJAX)

1. 异步请求用户名是否以注册

1.1 简单的HTML界面

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