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

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

　　</body>

　　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">

　　<head>

　　<title>Admin</title>

　　//下面的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>

　　</head>

　　<table>

　　<tr>

　　<th class="zongHead" colspan="2"> 产品问题及回答详细列表</th>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　<td class="questionHead" colspan="2"> 该问题详细内容:</td>

　　</tr>

　　<?php

　　if (isset($question) && !empty($question)) {

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<?php

　　}

　　<tr>

　　</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">

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<?php

　　if (isset($answers) && !empty($answers)) {

　　foreach ($answers as $key=>$value){

　　<tr>

　　<?php

　　if($_SESSION['ADMINISTRATOR']){//如果$_SESSION['ADMINISTRATOR']=0，即不是超级管理员，则不显示删除按钮

　　<?php

　　}

　　</td>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</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>

　　</td>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　</div>

　　</center>

　　</body>

　　</html>

　　2.product_newmsg.php:

复制代码代码如下:

　　//删除答案

　　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>

　　<tr>

　　</tr>

　　<?php

　　if (isset($answers) && !empty($answers)) {

　　foreach ($answers as $key=>$value){

　　<tr>

　　<?php

　　if($_SESSION['ADMINISTRATOR']){//如果$_SESSION['ADMINISTRATOR']=0，即不是超级管理员，则不显示删除按钮

　　<?php

　　}

　　</td>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<?php

　　}

　　}else{

　　<tr>

　　<td style="text-align:center;height:80px;" colspan="2">该问题目前还没有用户回答，你可以在下面填写内容来回答</td>

　　</tr>

　　<?php

　　}

　　</table>

　　</div>

　　这样就可以实现了。在浏览器中访问show.php就可以看到效果了。但是这个示例里面有很多东西操作了数据库。直接访问没什么效果。但是代码肯定是可以的。里面的原理和代码都是完整的。

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

教程首页更多教程