首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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

Posted in PHP onJune 21, 2013

方法其实挺多的。以前比较常用的是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>

这样就可以实现了。在浏览器中访问show.php就可以看到效果了。但是这个示例里面有很多东西操作了数据库。直接访问没什么效果。但是代码肯定是可以的。里面的原理和代码都是完整的。
好了。这里就介绍这两种方法。有这两种方法已经可以完成基本上所有的页面局部刷新了。

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP 批量更新网页内容实现代码
Jan 05 PHP
学习使用curl采集curl使用方法
Jan 11 PHP
PHP设计模式之迭代器模式的深入解析
Jun 13 PHP
php中的filesystem文件系统函数介绍及使用示例
Feb 13 PHP
php输出1000以内质数(素数)示例
Feb 16 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
Apr 01 PHP
php生成固定长度纯数字编码的方法
Jul 09 PHP
php实现网站留言板功能
Nov 04 PHP
PHP中each与list用法分析
Jan 08 PHP
详解php curl带有csrf-token验证模拟提交方法
Apr 18 PHP
PHP获取当前系统时间的方法小结
Oct 03 PHP
php实现记事本案例
Oct 20 PHP
解析php中var_dump,var_export,print_r三个函数的区别
Jun 21 #PHP
基于PHP文件操作的详细诠释
Jun 21 #PHP
解析php安全性问题中的:Null 字符问题
Jun 21 #PHP
浅析SVN常见问题及解决方法
Jun 21 #PHP
关于svn冲突的解决方法
Jun 21 #PHP
关于PHP模板Smarty的初级使用方法以及心得分享
Jun 21 #PHP
解析关于wamp启动是80端口被占用的问题
Jun 21 #PHP
ICF-SW100(1) SRF-40W(1) 德生1994(1) CPU(2) 德生G88(1) 天梯图(1) PR-D3L(1) AE3805(1) 纸巾盒(1) ICF-F10(1)
You might like
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php 文件上传实例代码
2012/04/19 PHP
浅析php单例模式
2014/11/25 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
DOM精简教程
2006/10/03 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
详解Vue.js——60分钟组件快速入门（上篇）
2016/12/05 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python线程详解
2015/06/24 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
基于python生成器封装的协程类
2019/03/20 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
澳大利亚有机化妆品网上商店：The Well Store
2020/02/20 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
中央空调节能方案
2014/06/15 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
2014年电教工作总结
2014/12/19 职场文书
团组织推优材料
2014/12/29 职场文书
故意伤害辩护词
2015/05/21 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers