Jquery异步加载页面（load）

想实现Jquery 加载完页面内容再显示出内容来吗？使用 load函数即可实现

2010-05-21

话不多说，上图先。

第一步：

第二步点击“load 1“按钮。出现”正在加载…”

第三步：加载完成

JS代码：

$(document).ready(function() { $(\’#btnLoad1.button\’).click(function() { $(\’#header\’).html(“正在加载…”); //$(\’#load_content\’).load(\’http://jqueryui.com/\’, ); $(\’#load_content\’).hide().load(\’http://www.baidu.com\’, function(responseText, textStatus, XMLHttpRequest) { //所有状态成功，执行此函数，显示数据 //textStatus四种状态 success、error、notmodified、timeout if (textStatus == “error”) { var msg = “错误: “; $(\’#header\’).html(msg + XMLHttpRequest.status + ” ” + XMLHttpRequest.statusText); } else if (textStatus == “timeout”) { var msg = “操时: “; $(\’#header\’).html(msg + XMLHttpRequest.status + ” ” + XMLHttpRequest.statusText); } else { $(\’#header\’).html(“加载完成”); $(this).fadeIn(); } }); }); });

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 runat=”server”> <title>JQuery – Load</title> <meta http-equiv=”Pragma” content=”no-cache”> <meta http-equiv=”Expires” content=”-1″> <mce:script type=”text/javascript” src=”js/jquery-1.3.2.min.js” mce_src=”js/jquery-1.3.2.min.js”></mce:script> <mce: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; } .button { cursor:pointer; } .buttonArea { margin: 10px; padding-bottom: 20px; } #load_content { float: left; width: 550px; text-align: center; } –></mce:style><style type=”text/css” mce_bogus=”1″> #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; } .button { cursor:pointer; } .buttonArea { margin: 10px; padding-bottom: 20px; } #load_content { float: left; width: 550px; text-align: center; } </style> </head> <body> <form id=”form1″ runat=”server”> <div id=”container”> <div id=”header”> <h2>加载演示</h2> </div> <div class=”buttonListArea”> <div class=”buttonArea”> <div class=”button” id=”btnLoad1″> Load 1</div> </div> </div> <div id=”load_content”> <h2>这是要被加载的区域</h2> </div> </div> </form> </body> </html>