PHP页面实现局部刷新，无刷新加载的几种方法

朱雀 2023-06-10 12:23 24阅读 0赞

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> 
    <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可以啊。你去试试吧。可以，可以就不会有那么多人在百度里面问了。  
这种方法呢说起来复杂，其实还是挺简单的。[专访][Link 1]网作者说下原理吧：  
要刷新的页面中把要自动刷新的局部的代码单独拿出来，做成一个独立的页面，自动刷新有很多种方法：可以在这个独立页面中用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>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> 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    </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:

**2.product\_newmsg.php:**

这样就可以实现了。在浏览器中访问show.php就可以看到效果了。但是这个示例里面有很多东西操作了数据库。直接访问没什么效果。但是代码肯定是可以的。里面的原理和代码都是完整的。  
好了。这里[必学智库][Link 2]小编就介绍这两种方法。有这两种方法已经可以完成基本上所有的页面局部刷新了。

[Link 1]: http://www.zhuanfang.org
[Link 2]: http://www.ibixue.com