JQuery学习(5-AJAX)

页面导航:首页 > 网络编程 > JavaScript > JQuery学习(5-AJAX)

JQuery学习(5-AJAX)

来源: 作者: 时间:2016-02-05 11:06 【

1 异步请求用户名是否以注册 1 1 简单的HTML界面 Register Please choose a user name: name t

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

1.1 简单的HTML界面

Register

name taken, please choose another
password must not be blank


please enter a valid e-mail address

Photography Interests (choose all that apply)

You can update your interests at any time by modifying settings in "My Account".

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');
	    	}
		}, '');
	});


1.3 异步提交FORM表单。

:取消submit的默认操作,然后序列化表单数据。

	$('#registerForm').submit(function(e) {
		e.preventDefault();
		var formData = $(this).serialize();
		$.post('inc/peRegister.php', formData, function(data) {	
			var Error = 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(){
})



Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <