快捷導(dǎo)航

jQuery Div中加載其他頁面的實(shí)現(xiàn)代碼

更新時(shí)間：2009年02月27日 20:54:50 作者：

在做一個(gè)表單簽核系統(tǒng)時(shí)，需在要簽核頁面中將表單內(nèi)容（事先做好的PHP頁面）顯示出來，于就是想能不能利用Ajax技術(shù)把這個(gè)事先做好的頁面嵌入到簽核頁面中呢？

經(jīng)過一翻嘗試，終于找到了一個(gè)自大比較滿意的解決方法，現(xiàn)寫在自己的博客中與大家分享。
第一步需要在簽核頁面中提供一個(gè)區(qū)域用來顯示表單內(nèi)容，這里使用的是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>") //這個(gè)DIv就是用來顯示表單內(nèi)容的容器 
->render(); 
echo $this->partial("approval/CommentsList.phtml", array("approval_list" => $this->approval_list)); 
?> 

第二步就是編寫一段JavaScript用來獲取表單頁面，使用jQuery

復(fù)制代碼代碼如下:

//動(dòng)態(tài)加載頁面 
//id 顯示頁面的容器組件ID 
//url 欲加載頁面網(wǎng)址 
function loadPage(id, url) { 
$("#"+id).addClass("loader"); 
$("#"+id).append("Loading......"); 
$.ajax({ 
type: "get", 
url: url, 
cache: false, 
error: function() {alert('加載頁面' + url + '時(shí)出錯(cuò)！');}, 
success: function(msg) { 
$("#"+id).empty().append(msg); 
$("#"+id).removeClass("loader"); 
} 
}); 
}

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)下拉加載功能實(shí)例代碼
本文通過一段實(shí)例代碼給大家介紹jquery實(shí)現(xiàn)下拉加載功能，代碼簡單易懂，需要的朋友參考下吧
2016-04-04
jquery+ajax實(shí)現(xiàn)注冊(cè)實(shí)時(shí)驗(yàn)證實(shí)例詳解
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)注冊(cè)實(shí)時(shí)驗(yàn)證的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery基于ajax請(qǐng)求實(shí)現(xiàn)注冊(cè)時(shí)無刷新驗(yàn)證的相關(guān)技巧,需要的朋友可以參考下
2015-12-12
jQuery通用的全局遍歷方法$.each()用法實(shí)例
這篇文章主要介紹了jQuery通用的全局遍歷方法$.each()用法,結(jié)合實(shí)例形式分析了$.each()方法實(shí)現(xiàn)遍歷功能的相關(guān)技巧,需要的朋友可以參考下
2016-07-07
實(shí)例詳解jQuery結(jié)合GridView控件的使用方法
這篇文章主要以實(shí)例的方式詳細(xì)介紹了jQuery結(jié)合GridView控件的使用方法，感興趣的小伙伴們可以參考一下
2016-01-01
setInterval,setTimeout與jquery混用的問題
當(dāng)遇到setInterval,setTimeout與jquery混用的問題時(shí)，直接按JavaScript中的語法寫并不起作用，有以下兩種解決方法
2013-04-04
Jquery index()方法獲取相應(yīng)元素索引值
昨天做一個(gè)Jqery效果，要獲取相應(yīng)元素的索引值，暈，又忘記了?，F(xiàn)在記錄下來，以后再次忘記好查怎么獲取相應(yīng)元素的索引值
2012-10-10
jQuery手機(jī)撥號(hào)界面特效代碼分享
這篇文章主要介紹了jQuery手機(jī)撥號(hào)界面特效，整體特效非常逼真自然，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jquery如何獲取元素的滾動(dòng)條高度等實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery如何獲取元素的滾動(dòng)條高度等實(shí)現(xiàn)代碼,需要的朋友可以參考下
2015-10-10
基于jquery編寫的橫向自適應(yīng)幻燈片切換特效的實(shí)例代碼
全屏自適應(yīng)jquery焦點(diǎn)圖切換特效,在IE6這個(gè)瀏覽器兼容性問題上得到了和諧,兼容IE6,適用瀏覽器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相關(guān)代碼
2013-08-08
jQuery LigerUI 使用教程表格篇(1)
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個(gè)美觀,而且功能強(qiáng)大的表格,支持排序、分頁、多表頭、固定列等等
2012-01-01