<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>JQuery - Load</title>
<link rel="stylesheet" media="all" type="text/css" href="../CSS/myStyle.css" />
<script src="http://www.perfectworld.com/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../JS/basicEffect.js"></script>
<style type="text/css">
#header {
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.buttonListArea {
float: left;
width: 150px;
padding-right: 10px;
border-right: 1px solid #eee;
margin-right: 10px;
}
.buttonArea {
margin: 10px;
padding-bottom:20px;
}
#load_content {
float: left;
width: 550px;
text-align:center;
}
#loading{ background:url(loading.gif) center center; width:16px; height:16px; display:inline-block; display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#ButAjax").click(function(){
$("#loading").show("slow");
id=$("#id").val();name=$("#name").val();
$.ajax({
url: "request.php?id="+id+"&name="+name+"",
cache: false,
async: true, //异步
success: function(html){
$("#loading").hide("slow");
//alert(textStatus);
$("#results").append(html+"<br/>");
},
error: function() {
alert("请求失败");
}
})
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
用户名:<input type="text" id="id"> 密码:<input type="text" name="name" id="name">
<input type="button" value="Try it" id="ButAjax"> <span id="results"><em id="loading"></em><br/></span>
</div>
</form>
</body>
</html>
<!--<?php
$id=$_GET["id"];$name=$_GET["name"];
echo $id.",".$name;
?>-->
loading