第13章 Ajax进阶（上）

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
 <form>
 	用户名：<input type="text" name="user" />
 	邮件：<input type="text" name="email" />
 	<input type="radio" name="sex" value="男" />男
 	<input type="radio" name="sex" value="女" />女
 	<input type="button" value="提交" />
 </form>
 <span class="loading">正在加载中...</span>
 <div id="box"></div>
</body>
</html>

style.css

/* CSS Document */
.loading{display: none; color: #c00; font-weight: bold;}

user.php

<?php
	echo $_POST['user'].'-'.$_POST['email']
?>

demo.js

$(function(){
	/*
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'user2.php',
			data:$('form').serialize(),
			success:function(response,status,xhr){
				$('#box').html(response);
			},
			//timeout:500
			//global:false
			error:function(xhr,errorText,errorType){
				//alert('错误！');
				//alert(errorText +':'+errorType);
				//alert(xhr.status +':'+xhr.statusText);
			}
		});
		
		$.post('user1.php').error(function(xhr,errorText,errorType){
			//alert('错误');
			alert(errorText +':'+errorType);
			alert(xhr.status +':'+xhr.statusText);
		});
		$.post('user1.php'); 
	});
	
	$(document).ajaxError(function(event, xhr, settings, info){
		//alert('错误！');
		//alert(event.type);
		//alert(event.target);
//		for(var i in event){
//			document.write(i+'<br/>');
//		}
//		alert(settings);
//		for(var i in settings){
//			document.write(i+'<br/>');
//		}
//		alert(settings.url);
//		alert(settings.type);
		alert(info);
	});
	$(document).ajaxStart(function(){
		$('.loading').show();
	}).ajaxStop(function(){
		$('.loading').hide();
	});
	
	$('form input[type=button]').click(function(){
		$.post('user.php',$('form').serialize(),function(response,status,xhr){
			$('#box').html(response);
		});
	});

	$('form input[type=button]').click(function(){
		$.post('user.php',$('form').serialize());
	});
	$(document).ajaxSend(function(){
		alert('发送请求之前执行的');
	}).ajaxComplete(function(){
		alert('请求完成后，不管是否失败成功');
	}).ajaxSuccess(function(){
		alert('请求成功后');
	}).ajaxError(function(){
		alert('请求失败后');
	});

	$('form input[type=button]').click(function(){
		$.post('user.php',$('form').serialize()).success(function(){
			alert('请求成功后！');
		}).complete(function(){
			alert('请求完成后！');
		}).error(function(){
			alert('请求失败后');
		});
	});
	*/
	$('form input[type=button]').click(function(){
		$.ajax({
			type:'POST',
			url:'user.php',
			data:$('form').serialize(),
			success:function(response,status,xhr){
				alert('请求成功后！');
			},
			complete:function(){
				alert('请求完成后，不管是否失败成功')
			},
			beforeSend:function(){
				alert('发送请求之前执行的');
			},
			error:function(){
				alert('请求失败后');
			}
		});
	});
	
});

第13章 Ajax进阶（上）

猜你喜欢