使用jQuery简化ajax操作
代码
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312"%>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.Form["name"] != null)
{
System.Threading.Thread.Sleep(3000);
Response.Write(Request.Form["name"] + "：你好，异步通信数据传输成功！");
Response.End();
}
}
}
</script>
<html>
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
body{font-size:12px; line-height:30px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//提交数据
function ajax(){
$.post(
"index.aspx",
{
name:"尊敬的朋友"
},
function(data){
$("#divData").text(data);
}
)
}
$(document).ready(function(){
//开始请求
$("#jindu").ajaxStart(function(){
$("#divData").html(null);
$(this).show();
});
//请求结束时
$("#jindu").ajaxStop(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<input id="Button1" type="button" value="异步通信测试" onclick="ajax();" />
<div id="divData"></div>
<div id="jindu" style="display:none;">数据正在提交，请稍后…</div>
</body>
</html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.Form["name"] != null)
{
System.Threading.Thread.Sleep(3000);
Response.Write(Request.Form["name"] + "：你好，异步通信数据传输成功！");
Response.End();
}
}
}
</script>
<html>
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
body{font-size:12px; line-height:30px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//提交数据
function ajax(){
$.post(
"index.aspx",
{
name:"尊敬的朋友"
},
function(data){
$("#divData").text(data);
}
)
}
$(document).ready(function(){
//开始请求
$("#jindu").ajaxStart(function(){
$("#divData").html(null);
$(this).show();
});
//请求结束时
$("#jindu").ajaxStop(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<input id="Button1" type="button" value="异步通信测试" onclick="ajax();" />
<div id="divData"></div>
<div id="jindu" style="display:none;">数据正在提交，请稍后…</div>
</body>
</html>
