.aspx代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery Ajax.aspx.cs" Inherits="练习.jQuery_Ajax" %>
<!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 runat="server">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$("#div_content1").load("txt/test1.txt");
});
$("#Button2").click(function () {
$("#div_content2").load("UpdatePanel控件.aspx #UpdatePanel3", myalert()); //用于测试加载其他页面组件
});
$("#div_content1").ajaxStart(function () {
$(this).html("正在加载...");
});
$("#div_content1").ajaxComplete(function () {
$(this).hide().fadeIn(3600);
});
});
function myalert() {
alert("自定义加载完成");
$("#div_content2").hide().fadeIn(1600);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="button" />下面用于测试加载文件
<div id="div_content1" style=" padding:10px; border:1px solid gray;">
</div>
<hr />
<input id="Button2" type="button" value="button" />下面用于测试加载其他页面组件
只是一个静态的显示,无法进行交互。
<div id="div_content2" style=" padding:10px; border:1px solid gray;">
</div>
</div>
</form>
</body>
</html>
效果如下: