PHP页面局部刷新功能实现小结。

最新推荐文章于 2023-05-31 04:58:36 发布

wuxieprobe

最新推荐文章于 2023-05-31 04:58:36 发布

阅读量1.3w

点赞数 3

分类专栏：工作积累我的原创 php 我的收藏文章标签： php javascript stylesheet class function xmlhttprequest

本文链接：https://blog.csdn.net/gayayang/article/details/7477792

版权

php 同时被 3 个专栏收录

177 篇文章 0 订阅

订阅专栏

我的收藏

162 篇文章 0 订阅

订阅专栏

每日成长

114 篇文章 0 订阅

订阅专栏

方法其实挺多的。以前比较常用的是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" οnclick="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 οnkeydοwn="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" οnlοad="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就可以看到效果了。但是这个示例里面有很多东西操作了数据库。直接访问没什么效果。但是代码肯定是可以的。里面的原理和代码都是完整的。

好了。这里就介绍这两种方法。有这两种方法已经可以完成基本上所有的页面局部刷新了。

wuxieprobe

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
6
评论
PHP页面局部刷新功能实现小结。

方法其实挺多的。以前比较常用的是iframe这样来做。现在多了个ajax，所以一般情况下都是用的ajax。第一种方法，ajax实现：当然，ajax使用起来确实很简单就可以实现，但是里面的很多知识还是比较有点深的。我之前做页面时间自动刷新的功能就是用的ajax。完整代码是：1.getTime.php:<?phpheader("cache-control:no-cache,m
复制链接

扫一扫