程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> PHP綜合 >> 淺析PHP頁面局部刷新功能的實現小結

淺析PHP頁面局部刷新功能的實現小結

編輯：PHP綜合

方法其實挺多的。以前比較常用的是iframe這樣來做。現在多了個ajax，所以一般情況下都是用的ajax。
第一種方法，ajax實現：
當然，ajax使用起來確實很簡單就可以實現，但是裡面的很多知識還是比較有點深的。我之前做頁面時間自動刷新的功能就是用的ajax。完整代碼是：
1.getTime.php:
復制代碼代碼如下:
<?php
header("cache-control:no-cache,must-revalidate");
header("Content-Type:text/html;charset=utf-8");
$time = "2012-1-20 18:00:00";
$dt_element=explode(" ",$time);
$date_element=explode("-",$dt_element[0]);
$time_element=explode(":",$dt_element[1]);
$date = mktime($time_element[0],$time_element[1],$time_element[2],$date_element[1],$date_element[2],$date_element[0]);
$nowTime = time();
$showtime = date("北京時間Y年m月d日H:i:s",$date-$nowTime);
if($showtime<="北京時間1970年01月01日08:00:00"){
echo "happy new year";
}
echo $showtime;

2.zidong.php:
復制代碼代碼如下:
</head>
<body>
<h1>Ajax動態顯示時間</h1>
<input type="button" value="開始顯示時間" id="go" onclick="start()" />
<p>當前時間：<font color="red"><span id="showtime"></span></font></p>
</body>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function start(){
createXMLHttpRequest();
var url="getTime.php";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
   document.getElementById("showtime").innerHTML = xmlHttp.responseText;
   setTimeout("start()",1000);
}
}
}
</script>
</html>

在浏覽器裡面直接訪問zidong.php就可以了，點擊裡面的按鈕就可以看到效果。
這個就是用ajax做的刷新頁面局部內容的小例子。你可能會懷疑：這裡面沒有跟數據庫交互啊？這還不簡單，直接在getTime.php頁面裡面操作就可以啦。

這種方法就不用多說了吧。至於ajax裡面的代碼是什麼意思，不要問我啦，我之前就說過，這裡面的ajax還是有點深的。

第二種方法：使用iframe方法實現。
不要給我說用PHP 的include可以啊。你去試試吧。可以，可以就不會有那麼多人在百度裡面問了。
這種方法呢說起來復雜，其實還是挺簡單的。說下原理吧：
要刷新的頁面中把要自動刷新的局部的代碼單獨拿出來，做成一個獨立的頁面，自動刷新有很多種方法：可以在這個獨立頁面中用javascript來控制，什麼setTimeout("start()",1000);啊或者setInterval("start()",1000);（每隔1秒刷新頁面）這樣，還可以用meta標簽實現：<meta http-equiv="Refresh" content="10">（每隔10秒刷新頁面）。這樣在原來的頁面中用iframe來將它調用過來。這樣就可以了。
還是上示例代碼吧：
1.show.php:
復制代碼代碼如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Admin</title>
<script language="javascript" type="text/javascript" src="/extend/js/json.js" ></script>
<script language="javascript" type="text/javascript" src="/extend/menus.js"></script>
<script language="javascript" type="text/javascript" src="/extend/js/jquery-1.4.2.js"></script>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href="/css/question.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//下面的isKeyTrigger（）、ctrlEnter（）、submitContent（）方法是響應鍵盤事件提交內容的。兼容性不錯。
function isKeyTrigger(e,keyCode){
var argv = isKeyTrigger.arguments;
var argc = isKeyTrigger.arguments.length;
var bCtrl = false;
if(argc > 2){
bCtrl = argv[2];
}
var bAlt = false;
if(argc > 3){
bAlt = argv[3];
}

var nav4 = window.Event ? true : false;

if(typeof e == 'undefined') {
e = event;
}

if( bCtrl &&
!((typeof e.ctrlKey != 'undefined') ?
e.ctrlKey : e.modifiers & Event.CONTROL_MASK > 0)){
return false;
}
if( bAlt &&
!((typeof e.altKey != 'undefined') ?
e.altKey : e.modifiers & Event.ALT_MASK > 0)){
return false;
}
var whichCode = 0;
if (nav4) whichCode = e.which;
else if (e.type == "keypress" || e.type == "keydown")
whichCode = e.keyCode;
else whichCode = e.button;

return (whichCode == keyCode);
}

function ctrlEnter(e){
var ie =navigator.appName=="Microsoft Internet Explorer"?true:false;
if(ie){
if(event.ctrlKey && window.event.keyCode==13){
submitContent();
}
}else{
if(isKeyTrigger(e,13,true)){
submitContent();
}
}
}
function submitContent(){
save_answer();
}

function save_answer(){
var $content = $('#answer').val();
var $save_answer_url = '<?php echo $save_answer_url;?>';
if ( $content == '' ){
alert("no data!");
return;
}
var $post_data = {
content : $content ,
qid:'<?php echo $question['ID'];?>',
uid:'<?php echo $questionUser['ID'];?>'
};
//alert($save_answer_url);
$.ajax({
type : 'post' ,
url : $save_answer_url ,
data : $post_data ,
success : function( e ){
var $rs = JSON.decode( e );
if ( $rs.succ == 1 ){
alert("answer success!");
$('#answer').val("");
location.reload(); //刷新頁面
} else {
alert( $rs.msg );
}
}
});
}
//刪除答案
function deleteanswer($id){
var $delete_answer_url = '<?php echo $delete_answer_url;?>';
var $post_data = {
id : $id
};
if(confirm("are you sure delete?")){
$.ajax({
type : 'post' ,
url : $delete_answer_url,
data : $post_data ,
success : function( e ){
var $rs = JSON.decode( e );
if ( $rs.succ == 1 ){
alert("delete success!");
location.reload(); //刷新頁面
} else {
alert( $rs.msg );
}
}
});
}
else{
return;
}

}
////設置為最佳答案
//function setbestanswer($id,$aid){
// var $set_bestanswer_url = '<?php echo $set_bestanswer_url;?>';
// var $post_data = {
// id : $id ,
// aid : $aid
// };
// if(confirm("are you sure set this answer is best?")){
// $.ajax({
// type : 'post' ,
// url : $set_bestanswer_url,
// data : $post_data ,
// success : function( e ){
// var $rs = JSON.decode( e );
// if ( $rs.succ == 1 ){
// alert("set success!");
// location.reload(); //刷新頁面
// } else {
// alert( $rs.msg );
// }
// }
// });
// }
// else{
// return;
// }
//
//}
</script>






























































</head>
<body onkeydown="javascript:ctrlEnter(event);">
<center>
<div class="Container">
   <table>
<tr>
   <th class="zongHead" colspan="2"> 產品問題及回答詳細列表</th>
</tr>
<tr>
   <td colspan="2"><hr/></td>
</tr>
<tr>
   <td class="questionHead" colspan="2"> 該問題詳細內容:</td>
</tr>
<?php
if (isset($question) && !empty($question)) {
?>
<tr>
<td class="questionContent" colspan="2"><?php echo $question['Question'];?></td>
</tr>
<tr>
<td class="author" colspan="2">提問者：<?php echo $questionUser['Email'];?>   提問時間：<?php echo $question['Date'];?></td>
</tr>
<?php
}
?>
<tr>
   <td colspan="2"><hr/></td>
</tr>
</table>
<iframe src="<?php echo get_url(array('m'=>'product','a'=>'product_newmsg','qid'=>$qid));?>" scrolling="no" frameborder="0" width="999px" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
<table class="youWrite">
   <tr>
<td>你也回答一下吧：</td>
   </tr>
   <tr>
<td>
<textarea rows="10" cols="80" id="answer" name="answer"></textarea>
</td>
   </tr>
   <tr>
<td class="submits"><a href="javascript:save_answer();"><img style="border:0;" src="/images/questionbutton.jpg"/></a></td>
</tr>
</table>
</div>
</center>
</body>
</html>

2.product_newmsg.php:
復制代碼代碼如下:
<meta http-equiv="Refresh" content="10">
<script language="javascript" type="text/javascript" src="/extend/js/json.js" ></script>
<script language="javascript" type="text/javascript" src="/extend/menus.js"></script>
<script language="javascript" type="text/javascript" src="/extend/js/jquery-1.4.2.js"></script>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href="/css/question.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//刪除答案
function deleteanswer($id){
var $delete_answer_url = '<?php echo $delete_answer_url;?>';
var $post_data = {
  id : $id
};
if(confirm("are you sure delete?")){
  $.ajax({
   type : 'post' ,
   url : $delete_answer_url,
   data : $post_data ,
   success : function( e ){
    var $rs = JSON.decode( e );
    if ( $rs.succ == 1 ){
     alert("delete success!");
     location.reload(); //刷新頁面
    } else {
     alert( $rs.msg );
    }
   }
  });
}
else{
  return;
}

}
</script>
<div id="answerDiv" class="answerDiv">
   <table id="answerTable">
      <tr>
   <td class="answerHead" colspan="2"> 回答：</td>
      </tr>



<?php

if (isset($answers) && !empty($answers)) {
foreach ($answers as $key=>$value){
?>
<tr>
   <td class="boss"><?php echo $value['Answer'];?></td>
   <td style="text-align:right;">
   <?php
if($_SESSION['ADMINISTRATOR']){//如果$_SESSION['ADMINISTRATOR']=0，即不是超級管理員，則不顯示刪除按鈕
   ?>
    <a href="javascript:deleteanswer(<?php echo $value['ID'];?>);"><img src="/images/questiondelete.jpg" style="border:0;"/></a>
   <?php
}
   ?>
   </td>
</tr>
<tr>
<td class="answerAuthor" colspan="2">回答者：<?php echo $value['Email'];?>   回答時間：<?php echo $value['Date'];?></td>
</tr>
<tr>
<td colspan="2"><hr style="border: 1px dashed #ccc; width: 100%; height: 1px;" /></td>
</tr>
<?php
}
}else{
?>
<tr>
<td style="text-align:center;height:80px;" colspan="2">該問題目前還沒有用戶回答，你可以在下面填寫內容來回答</td>
</tr>
<?php
}
?>
</table>
</div>

這樣就可以實現了。在浏覽器中訪問show.php就可以看到效果了。但是這個示例裡面有很多東西操作了數據庫。直接訪問沒什麼效果。但是代碼肯定是可以的。裡面的原理和代碼都是完整的。
好了。這裡就介紹這兩種方法。有這兩種方法已經可以完成基本上所有的頁面局部刷新了。