php页面局部刷新功能的实现方法_php教程

php页面局部刷新功能的实现方法: 发布时间：2019-11-04编辑：脚本学堂

本文介绍下，php实现页面局部刷新的二个种方法，ajax方法与iframe方法。有需要的朋友参考下吧。

方法1，ajax方法。
1，getTime.php，用到了explode函数。

<?php
/**
* ajax局部刷新页面
* edit www.jb200.com
*/
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:

<html>
<head>
<title>局部刷新</title>
</head>
<body>    
<h1>Ajax动态显示时间_www.jb200.com</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即可，点击里面的按钮就可以看到效果。
可以直接在getTime.php页面中添加数据库操作代码即可实现交互。

方法2，使用iframe实现。

原理：
要刷新的页面中把要自动刷新的局部的代码单独拿出来，做成一个独立的页面，自动刷新有很多种方法：可以在这个独立页面中用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" />

<title>iframe局部刷新_www.jb200.com</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>






























































</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>
    <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删除html标签的三种方法分享
下一篇：查找php.ini路径在哪里的方法

与 php页面局部刷新功能的实现方法有关的文章

本文标题：php页面局部刷新功能的实现方法
本页链接：http://www.jb200.com/article/10042.html

浏览排行

栏目分类

热点文章

php页面局部刷新功能的实现方法