首页
所有分类
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 相关文章推荐
怎么使 Mysql 数据同步
Oct 09 PHP
PHP在特殊字符前加斜杠的实现代码
Jul 17 PHP
通过dbi使用perl连接mysql数据库的方法
Apr 16 PHP
ThinkPHP之foreach标签使用概述
Jun 30 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
Nov 22 PHP
php提示Failed to write session data错误的解决方法
Dec 17 PHP
PHP针对JSON操作实例分析
Jan 12 PHP
php微信公众平台交互与接口详解
Nov 28 PHP
PHP中list方法用法示例
Dec 01 PHP
thinkPHP模板引擎用法示例
Dec 08 PHP
PHP getNamespaces()函数讲解
Feb 03 PHP
PHP使用非对称加密算法RSA
Apr 21 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
慰问信(53) 文书(291) 申请书(21) 实用文书(952) AngularJS(2) 导游词(322) HAM-2000(1) 观后感(479) 通知(159) 波段(1)
You might like
关于crontab的使用详解
2013/06/24 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
js函数般调用正则
2008/04/08 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python实现批量转换文件编码的方法
2015/07/28 Python
Python实现抢购IPhone手机
2018/02/07 Python
python实现事件驱动
2018/11/21 Python
python读取并写入mat文件的方法
2019/07/12 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
欧舒丹美国官网：L’Occitane美国
2018/02/23 全球购物
印尼最大的网上书店：Gramedia.com
2018/09/13 全球购物
计算机操作自荐信
2013/12/07 职场文书
物业招聘计划书
2014/01/10 职场文书
四年级科学教学反思
2014/02/10 职场文书
五好家庭申报材料
2014/12/20 职场文书
小班教师个人总结
2015/02/05 职场文书
中秋节晚会开场白
2015/05/29 职场文书
初一年级组工作总结
2015/08/12 职场文书
深入理解pytorch库的dockerfile
2022/06/10 Python
go goth封装第三方认证库示例详解
2022/08/14 Golang