首页
所有分类
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 相关文章推荐
某大型网络公司应聘时的笔试题目附答案
Mar 27 PHP
基于PHP常用字符串的总结(待续)
Jun 07 PHP
Yii入门教程之Yii安装及hello world
Nov 25 PHP
PHP生成静态HTML页面最简单方法示例
Apr 09 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
Dec 07 PHP
PHP汉字转换拼音的函数代码
Dec 30 PHP
YII2.0之Activeform表单组件用法实例
Jan 09 PHP
PHP线程的内存回收问题
Jul 08 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
Sep 26 PHP
php魔术方法功能与用法实例分析
Oct 19 PHP
Django中通过定时任务触发页面静态化的处理方式
Aug 29 PHP
在 Laravel 中动态隐藏 API 字段的方法
Oct 25 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
redis shake(1) 可视化动图(1) 阿里云(6) ipyvizzu(1) bufio(1) pdfkit(1) 蒙特卡罗(1) 条形图(1) 数据同步(1) matplotlib(7)
You might like
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
真正的ZIP文件操作类(php)
2007/07/21 PHP
php 文件上传系统手记
2009/10/26 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
js实现图片点击左右轮播
2015/07/08 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
进一步理解Python中的函数编程
2015/04/13 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
python清理子进程机制剖析
2017/11/23 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python requests指定出口ip的例子
2019/07/25 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
Python实现壁纸下载与轮换
2020/10/19 Python
全球最大的游戏市场：G2A
2018/07/05 全球购物
上学迟到的检讨书
2014/01/11 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
关于运动会的广播稿
2014/09/22 职场文书
北京天坛导游词
2015/02/12 职场文书