浅析PHP页面局部刷新功能的实现小结

前端技术 2023/09/02 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\" /> 
<!--<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（）方法是响应键盘事件提交内容的。兼容性不错。 
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> 
<!--<script language=\"javascript\">--> 
<!--setInterval(\"myajax();\",1000);--> 
<!--function myajax()--> 
<!--{--> 
<!--  //获取信息json数组 --> 
<!--  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\\\">该问题目前还没有用户回答，你可以在下面填写内容来回答</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\">  产品问题及回答详细列表</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> 
<!--<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\">该问题目前还没有用户回答，你可以在下面填写内容来回答</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:
复制代码 代码如下:

<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>
<!--  <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\">该问题目前还没有用户回答，你可以在下面填写内容来回答</td>
 </tr>
<?php
}
?> 
  </table>
  </div>

本文地址：https://www.stayed.cn/item/5548

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案