jQuery Div中加载其他页面的实现代码

246 阅读 0 评论 163 点赞

我是靠谱客的博主等待身影，最近开发中收集的这篇文章主要介绍jQuery Div中加载其他页面的实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

经过一翻尝试，终于找到了一个自大比较满意的解决方法，现写在自己的博客中与大家分享。
第一步需要在签核页面中提供一个区域用来显示表单内容，这里使用的是DIV。

复制代码代码如下:

<script type="text/javascript"> 
$(document).ready(function() { 
loadPage("doc_view", "<?php echo $this->doc_view_url . '/flag/1'; ?>"); 
}); 
</script> 
<?php 
$p = new Portlet(); 
$p->setCaption("Document View") 
->setShowBorder(false) 
->addItem("<div id='doc_view'></div>") //这个DIv就是用来显示表单内容的容器 
->render(); 
echo $this->partial("approval/CommentsList.phtml", array("approval_list" => $this->approval_list)); 
?> 

第二步就是编写一段JavaScript用来获取表单页面，使用jQuery

复制代码代码如下:

//动态加载页面 
//id 显示页面的容器组件ID 
//url 欲加载页面网址 
function loadPage(id, url) { 
$("#"+id).addClass("loader"); 
$("#"+id).append("Loading......"); 
$.ajax({ 
type: "get", 
url: url, 
cache: false, 
error: function() {alert('加载页面' + url + '时出错！');}, 
success: function(msg) { 
$("#"+id).empty().append(msg); 
$("#"+id).removeClass("loader"); 
} 
}); 
}