转载地址 https://www.jb51.net/article/38901.htm

方法其实挺多的。以前比较常用的是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页面局部刷新功能的实现小结(转)的更多相关文章

  1. jquery实现页面局部刷新

    后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...

  2. 使用ajax与iframe嵌套实现页面局部刷新

    使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.​1. [代码]javascript代码 function cj_start(depname,gr ...

  3. Webform——页面局部刷新

    有一些数据控件,每次更改它的值后,都会重新查询数据库,然后再重新显示出来. 这样每次都会刷新全部页面,如果是一些信息量很庞大的页面,就会出现卡顿的现象,为了避免这种情况,就用到了局部刷新. 所用到的控 ...

  4. ASP.Net用jQuery ajax实现页面局部刷新

    刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...

  5. HTML页面局部刷新

    /.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服 ...

  6. spring mvc + ajax上传文件,页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...

  7. pushState()、popstate事件配合ajax实现浏览器前进后退页面局部刷新

    最近研究pushState,看了网上的文章还是不怎么会用,于是自己摸索着理解使用,终于实现局部刷新同时前进后退. 首先说说pushState(),这个函数将当前的url等信息加入history堆栈中: ...

  8. updatepanel局部刷新功能,实现注册时对用户名的检测

    updatepanel的使用 通过将控件放入到updatepanel中,实现局部刷新. 前台代码:<asp:ScriptManager ID="ScriptManager1" ...

  9. AjaxAnyWhere 实现页面局部刷新,局部分页

    这个比較jquery.单纯ajax异步简单多了.不多说了直接上代码. 须要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa ...

随机推荐

  1. EF简单的CodeFirst示例(自己创建数据库,不使用数据迁移)

    1.新建一个控制台应用程序 2.右键引用--管理NuGet程序包,安装如下几项 3.打开App.config文件,加入如下代码: <connectionStrings>    <ad ...

  2. PP: Overviewing evolution patterns of egocentric networks by interactive construction of spatial layouts

    Problem: get an overall picture of how ego-networks evolve is a common challenging task. Existing te ...

  3. Unable to connect to a repository at URL

    缓存问题: 1. 右键点击本地副本,TortoiseSVN -> Settings -> Saved Data, 2.点击“Clear”按钮,把本地缓存都清除了,点击“确定”: 3. 再重 ...

  4. SpringScan

    ClassPathBeanDefinitionScanner.java /** * Perform a scan within the specified base packages, * retur ...

  5. util之Queue

    定义:ArrayDeque<Integer> queue = new ArrayDeque<Integer>(); offer();添加元素 Peek()返回队列首部元素值 P ...

  6. CAD 批量提取点坐标,实现坐标的快速提取

    原创 CAD 批量提取点坐标,实现坐标的快速提取 2018-08-07 20:36:13 caohongji 阅读数 13678   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议 ...

  7. 通过JMX获取JVM信息

    package com.googosoft.gateway_zuul; import java.lang.management.ClassLoadingMXBean; import java.lang ...

  8. stm32f103中freertos的tasks基本使用案例及备忘

    基本实例   freetos的在stm32中使用踩了一些坑,事情做完了,就 做个备忘,希望能给后面的人一些借鉴. 先给出一个实际的例子吧. 启动代码 void task_create(void) { ...

  9. Tomcat目录说明

    apache-tomcat-x.x.xx bin:保存启动与监控Tomcat的命令文件的文件夹 conf:保存Tomcat配置文件的文件夹,如servlet.xml为服务器的主配置文件,web.xml ...

  10. 7_1 除法(UVa725)<选择合适的枚举对象>

    如果把数字0到9分配成2个整数(各五位数),现在请你写一支程序找出所有的配对使得第一个数可以整除第二个数,而且商为N(2<=N<=79),也就是:abcde / fghijk = N这里每 ...