您现在的位置是：首页 > 后端

当前栏目

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

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

2023-06-13 09:15:02 时间

方法其实挺多的。以前比较常用的是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-2018: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"happynewyear";
}
echo$showtime;

2.zidong.php:
复制代码代码如下:

</head>
<body>
<h1>Ajax动态显示时间</h1>
<inputtype="button"value="开始显示时间"id="go"onclick="start()"/>
<p>当前时间：<fontcolor="red"><spanid="showtime"></span></font></p>
</body>
<scripttype="text/javascript">
varxmlHttp;
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
elseif(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}
}
functionstart(){
createXMLHttpRequest();
varurl="getTime.php";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
functioncallback(){
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标签实现：<metahttp-equiv="Refresh"content="10">（每隔10秒刷新页面）。这样在原来的页面中用iframe来将它调用过来。这样就可以了。
还是上示例代码吧：
1.show.php:
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>Admin</title>
<scriptlanguage="javascript"type="text/javascript"src="/extend/js/json.js"></script>
<scriptlanguage="javascript"type="text/javascript"src="/extend/menus.js"></script>
<scriptlanguage="javascript"type="text/javascript"src="/extend/js/jquery-1.4.2.js"></script>
<linkhref="/css/main.css"rel="stylesheet"type="text/css"/>
<linkhref="/css/question.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript">
//下面的isKeyTrigger（）、ctrlEnter（）、submitContent（）方法是响应键盘事件提交内容的。兼容性不错。
functionisKeyTrigger(e,keyCode){
varargv=isKeyTrigger.arguments;
varargc=isKeyTrigger.arguments.length;
varbCtrl=false;
if(argc>2){
bCtrl=argv[2];
}
varbAlt=false;
if(argc>3){
bAlt=argv[3];
}

varnav4=window.Event?true:false;

if(typeofe=="undefined"){
e=event;
}

if(bCtrl&&
!((typeofe.ctrlKey!="undefined")?
e.ctrlKey:e.modifiers&Event.CONTROL_MASK>0)){
returnfalse;
}
if(bAlt&&
!((typeofe.altKey!="undefined")?
e.altKey:e.modifiers&Event.ALT_MASK>0)){
returnfalse;
}
varwhichCode=0;
if(nav4)whichCode=e.which;
elseif(e.type=="keypress"||e.type=="keydown")
whichCode=e.keyCode;
elsewhichCode=e.button;

return(whichCode==keyCode);
}

functionctrlEnter(e){
varie=navigator.appName=="MicrosoftInternetExplorer"?true:false;
if(ie){
if(event.ctrlKey&&window.event.keyCode==13){
submitContent();
}
}else{
if(isKeyTrigger(e,13,true)){
submitContent();
}
}
}
functionsubmitContent(){
save_answer();
}

functionsave_answer(){
var$content=$("#answer").val();
var$save_answer_url="<?phpecho$save_answer_url;?>";
if($content==""){
alert("nodata!");
return;
}
var$post_data={
content:$content,
qid:"<?phpecho$question["ID"];?>",
uid:"<?phpecho$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("answersuccess!");
$("#answer").val("");
location.reload();//刷新页面
}else{
alert($rs.msg);
}
}
});
}
//删除答案
functiondeleteanswer($id){
var$delete_answer_url="<?phpecho$delete_answer_url;?>";
var$post_data={
id:$id
};
if(confirm("areyousuredelete?")){
$.ajax({
type:"post",
url:$delete_answer_url,
data:$post_data,
success:function(e){
var$rs=JSON.decode(e);
if($rs.succ==1){
alert("deletesuccess!");
location.reload();//刷新页面
}else{
alert($rs.msg);
}
}
});
}
else{
return;
}

}
////设置为最佳答案
//functionsetbestanswer($id,$aid){
// var$set_bestanswer_url="<?phpecho$set_bestanswer_url;?>";
// var$post_data={
// id:$id,
// aid:$aid
// };
// if(confirm("areyousuresetthisanswerisbest?")){
// $.ajax({
// type:"post",
// url:$set_bestanswer_url,
// data:$post_data,
// success:function(e){
// var$rs=JSON.decode(e);
// if($rs.succ==1){
// alert("setsuccess!");
// location.reload();//刷新页面
// }else{
// alert($rs.msg);
// }
// }
// });
// }
// else{
// return;
// }
//
//}
</script>






























































</head>
<bodyonkeydown="javascript:ctrlEnter(event);">
<center>
<divclass="Container">
  <table>
<tr>
  <thclass="zongHead"colspan="2"> 产品问题及回答详细列表</th>
</tr>
<tr>
  <tdcolspan="2"><hr/></td>
</tr>
<tr>
  <tdclass="questionHead"colspan="2">该问题详细内容:</td>
</tr>
<?php
if(isset($question)&&!empty($question)){
?>
<tr>
<tdclass="questionContent"colspan="2"><?phpecho$question["Question"];?></td>
</tr>
<tr>
<tdclass="author"colspan="2">提问者：<?phpecho$questionUser["Email"];?>  提问时间：<?phpecho$question["Date"];?></td>
</tr>
<?php
}
?>
<tr>
  <tdcolspan="2"><hr/></td>
</tr>
</table>
<iframesrc="<?phpechoget_url(array("m"=>"product","a"=>"product_newmsg","qid"=>$qid));?>"scrolling="no"frameborder="0"width="999px"onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
<tableclass="youWrite">
  <tr>
<td>你也回答一下吧：</td>
  </tr>
  <tr>
<td>
<textarearows="10"cols="80"id="answer"name="answer"></textarea>
</td>
  </tr>
  <tr>
<tdclass="submits"><ahref="javascript:save_answer();"><imgstyle="border:0;"src="/images/questionbutton.jpg"/></a></td>
</tr>
</table>
</div>
</center>
</body>
</html>

2.product_newmsg.php:
复制代码代码如下:
<metahttp-equiv="Refresh"content="10">
<scriptlanguage="javascript"type="text/javascript"src="/extend/js/json.js"></script>
<scriptlanguage="javascript"type="text/javascript"src="/extend/menus.js"></script>
<scriptlanguage="javascript"type="text/javascript"src="/extend/js/jquery-1.4.2.js"></script>
<linkhref="/css/main.css"rel="stylesheet"type="text/css"/>
<linkhref="/css/question.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript">
//删除答案
functiondeleteanswer($id){
var$delete_answer_url="<?phpecho$delete_answer_url;?>";
var$post_data={
  id:$id
};
if(confirm("areyousuredelete?")){
  $.ajax({
   type:"post",
   url:$delete_answer_url,
   data:$post_data,
   success:function(e){
    var$rs=JSON.decode(e);
    if($rs.succ==1){
     alert("deletesuccess!");
     location.reload();//刷新页面
    }else{
     alert($rs.msg);
    }
   }
  });
}
else{
  return;
}

}
</script>
<divid="answerDiv"class="answerDiv">
   <tableid="answerTable">
    <tr>
   <tdclass="answerHead"colspan="2"> 回答：</td>
    </tr>



<?php

if(isset($answers)&&!empty($answers)){
foreach($answersas$key=>$value){
?>
<tr>
  <tdclass="boss"><?phpecho$value["Answer"];?></td>
  <tdstyle="text-align:right;">
  <?php
if($_SESSION["ADMINISTRATOR"]){//如果$_SESSION["ADMINISTRATOR"]=0，即不是超级管理员，则不显示删除按钮
  ?>
   <ahref="javascript:deleteanswer(<?phpecho$value["ID"];?>);"><imgsrc="/images/questiondelete.jpg" style="border:0;"/></a>
  <?php
}
  ?>
  </td>
</tr>
<tr>
<tdclass="answerAuthor"colspan="2">回答者：<?phpecho$value["Email"];?>   回答时间：<?phpecho$value["Date"];?></td>
</tr>
<tr>
<tdcolspan="2"><hrstyle="border:1pxdashed#ccc;width:100%;height:1px;"/></td>
</tr>
<?php
}
}else{
?>
<tr>
<tdstyle="text-align:center;height:80px;"colspan="2">该问题目前还没有用户回答，你可以在下面填写内容来回答</td>
</tr>
<?php
}
?>
</table>
</div>

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

猜你喜欢

手把手教你如何编写springboot中starter
js重写alert控件(适合学习js的新手朋友)
【拿捏链表（Ⅰ）】—作为程序员必须会的链表经典题目
在Oracle中学习如何使用静态监听（oracle中静态监听）
华为路由器如何通过配置STelnet远程登陆系统
功能利用Oracle实现复杂条件判断查询（oracle查询判断）
使用Linux ls命令检查文件状态（linuxls）
ORA-14523: Cannot co-locate [sub]partition of string string with table [sub]partition because string block size [string] does not match table block size [string] ORACLE 报错故障修复远程处理
SQL多表连接查询（详细实例）详解编程语言
Spring setUrl方法：设置连接数据库的URL路径
Oracle触发器类型及其应用（oracle触发器类型）
设计使用Oracle OWB设计优雅的数据仓库（oracleowb）
准备 LVM Volume Provider – 每天5分钟玩转 OpenStack（49）
Redis键值丢失严重影响解决之道（redis 键值丢失）
SQL Server长整型数据类型及其应用（sqlserver长整形）
Qcom 平台 LK 阶段配置 I2C[通俗易懂]
树莓派实现Linux系统的运行（树莓派运行linux）
万网推出免费虚拟主机
C#获取文件夹及文件的大小与占用空间的方法

zl程序教程

当前栏目

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

相关文章