淺析PHP頁面局部刷新功能的實(shí)現(xiàn)小結(jié)

更新時間：2013年06月21日 17:42:18 作者：

本篇文章是對PHP頁面局部刷新功能的實(shí)現(xiàn)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下

方法其實(shí)挺多的。以前比較常用的是iframe這樣來做?，F(xiàn)在多了個ajax，所以一般情況下都是用的ajax。
第一種方法，ajax實(shí)現(xiàn)：
當(dāng)然，ajax使用起來確實(shí)很簡單就可以實(shí)現(xiàn)，但是里面的很多知識還是比較有點(diǎn)深的。我之前做頁面時間自動刷新的功能就是用的ajax。完整代碼是：
1.getTime.php:

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

<?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:

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

</head>  
<body>  
<h1>Ajax動態(tài)顯示時間</h1>  
<input type="button" value="開始顯示時間" id="go" onclick="start()" />  
<p>當(dāng)前時間：<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就可以了，點(diǎn)擊里面的按鈕就可以看到效果。
這個就是用ajax做的刷新頁面局部內(nèi)容的小例子。你可能會懷疑：這里面沒有跟數(shù)據(jù)庫交互??？這還不簡單，直接在getTime.php頁面里面操作就可以啦。

這種方法就不用多說了吧。至于ajax里面的代碼是什么意思，不要問我啦，我之前就說過，這里面的ajax還是有點(diǎn)深的。

第二種方法：使用iframe方法實(shí)現(xiàn)。
不要給我說用PHP 的include可以啊。你去試試吧?？梢?，可以就不會有那么多人在百度里面問了。
這種方法呢說起來復(fù)雜，其實(shí)還是挺簡單的。說下原理吧：
要刷新的頁面中把要自動刷新的局部的代碼單獨(dú)拿出來，做成一個獨(dú)立的頁面，自動刷新有很多種方法：可以在這個獨(dú)立頁面中用javascript來控制，什么setTimeout("start()",1000);啊或者setInterval("start()",1000);（每隔1秒刷新頁面）這樣，還可以用meta標(biāo)簽實(shí)現(xiàn)：<meta http-equiv="Refresh" content="10">（每隔10秒刷新頁面）。這樣在原來的頁面中用iframe來將它調(diào)用過來。這樣就可以了。
還是上示例代碼吧：
1.show.php:

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

<!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" />  
<!--<meta http-equiv="refresh" content="5">-->  
<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（）方法是響應(yīng)鍵盤事件提交內(nèi)容的。兼容性不錯。  
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;  
}  

}  
////設(shè)置為最佳答案  
//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>  
<!--<script language="javascript">-->  
<!--setInterval("myajax();",1000);-->  
<!--function myajax()-->  
<!--{-->  
<!--  //獲取信息json數(shù)組 -->  
<!--  var html2 = "";-->  
<!--  html2 = "<table id=\"answerTable\"><tr><td class=\"answerHead\" colspan=\"2\"> 回答："+-->  
<!--   "</td></tr><tr><td><iframe width=0 height=0 src=\"check_new.php\"></iframe></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']){?>"+-->  
<!--   "<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\">該問題目前還沒有用戶回答，你可以在下面填寫內(nèi)容來回答</td></tr>"+-->  
<!--   "<?php }?>  </table>";-->  
<!--  $("#answerDiv").html(html2);-->  
<!--}-->  
<!--</script>-->  

<!--<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(){-->  
<!-- //alert("laslfda;f");-->  
<!-- createXMLHttpRequest();-->  
<!-- var url="/extend/check_new.php?sid="+Math.random()";-->  
<!-- //var url = "../../view/product/check_new.php";-->  
<!-- //alert(url);-->  
<!-- xmlHttp.open("GET",url,true);-->  
<!-- //alert(url);-->  
<!-- xmlHttp.onreadystatechange = callback;-->  
<!-- xmlHttp.send(null);-->  
<!--}-->  
<!--function callback(){-->  
<!-- if(xmlHttp.readyState == 4){-->  
<!--  //alert("asdflasdf");-->  
<!--  //if(xmlHttp.status == 200){-->  
<!--   document.getElementById("answerDiv").innerHTML = xmlHttp.responseText;-->  
<!--   //alert(document.getElementById("answerDiv").innerHTML);-->  
<!--   setTimeout("start()",1000);-->  
<!--  //}-->  
<!--  //alert(xmlHttp.status);-->  
<!-- }-->  
<!--}-->  
<!--setInterval("start()",1000);-->  
<!--</script>-->  
</head>  
<body onkeydown="javascript:ctrlEnter(event);">  
<center>  
<div class="Container">  
   <table>  
  <tr>  
   <th class="zongHead" colspan="2">  產(chǎn)品問題及回答詳細(xì)列表</th>  
  </tr>  
  <tr>  
   <td colspan="2"><hr/></td>  
  </tr>  
  <tr>  
   <td class="questionHead" colspan="2"> 該問題詳細(xì)內(nèi)容:</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>  
<!--<div id="answerDiv" class="answerDiv">  
<table id="answerTable">  
  <tr>  
<td class="answerHead" colspan="2"> 回答：</td>  
  </tr>  
  <tr>  
<td><iframe width=0 height=0 src="check_new.php"></iframe></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">該問題目前還沒有用戶回答，你可以在下面填寫內(nèi)容來回答</td>  
</tr>  
<?php   
}  
?> 
  </table>  
  </div>  
  --><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:

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

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">該問題目前還沒有用戶回答，你可以在下面填寫內(nèi)容來回答</td>
</tr>
<?php
}
?>
</table>
</div>

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

您可能感興趣的文章: