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('请求失败后');
}
});
});
});