浅析PHP页面局部刷新功能的实现小结
程序员文章站
2022-06-01 20:06:38
方法其实挺多的。以前比较常用的是iframe这样来做。现在多了个ajax，所以一般情况下都是用的ajax。第一种方法，ajax实现：当然，ajax使用起来确实很简单就可以实...
方法其实挺多的。以前比较常用的是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可以啊。你去试试吧。可以，可以就不会有那么多人在百度里面问了。
这种方法呢说起来复杂，其实还是挺简单的。说下原理吧：
要刷新的页面中把要自动刷新的局部的代码单独拿出来，做成一个独立的页面，自动刷新有很多种方法：可以在这个独立页面中用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 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>
<!--<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就可以看到效果了。但是这个示例里面有很多东西操作了数据库。直接访问没什么效果。但是代码肯定是可以的。里面的原理和代码都是完整的。
好了。这里就介绍这两种方法。有这两种方法已经可以完成基本上所有的页面局部刷新了。