Jquery异步加载页面（load）

最新推荐文章于 2025-10-17 15:07:19 发布

原创最新推荐文章于 2025-10-17 15:07:19 发布 · 1.9w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #xmlhttprequest #float #function #div #class

JS+XHTML 同时被 2 个专栏收录

36 篇文章

订阅专栏

AJAX

11 篇文章

订阅专栏

这篇博客介绍了如何使用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"></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>