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

2020-03-22 16:21:38

字体：大中小

来源：转载

供稿：网友

方法其实挺多的。以前比较常用的是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" /
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 "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 "boss/" "+--
!-- " ?php echo $value['Answer'];? "+--
!-- " /td td "text-align:right;/" "+--
!-- " ?php if($_SESSION['ADMINISTRATOR']){? "+--
!-- " a href=/"javascript:deleteanswer( ?php echo $value['ID'];? /" "+--
!-- " img src=/"/images/questiondelete.jpg/" "border:0;/"/ /a "+--
!-- " ?php }? "+--
!-- " /td /tr tr td "answerAuthor/" colspan=/"2/" 回答者："+--
!-- " ?php echo $value['Email'];? "+--
!-- " 回答时间："+--
!-- " ?php echo $value['Date'];? "+--
!-- " /td /tr tr td colspan=/"2/" hr "border: 1px dashed #ccc; width: 100%; height: 1px;/" / /td /tr "+--
!-- " ?php }}else{? "+--
!-- " tr td "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
center
div
table
tr
th colspan="2" 产品问题及回答详细列表 /th
/tr
tr
td colspan="2" hr/ /td
/tr
tr
td colspan="2" 该问题详细内容: /td
/tr
?php
if (isset($question) && !empty($question)) {
?
tr
td colspan="2" ?php echo $question['Question'];? /td
/tr
tr
td 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"
table id="answerTable"
tr
td 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 ?php echo $value['Answer'];? /td
td
?php
if($_SESSION['ADMINISTRATOR']){//如果$_SESSION['ADMINISTRATOR']=0，即不是超级管理员，则不显示删除按钮
?
a href="javascript:deleteanswer( ?php echo $value['ID'];? " img src="/images/questiondelete.jpg" / /a
?php
}
?
/td
/tr
tr
td colspan="2" 回答者： ?php echo $value['Email'];? 回答时间： ?php echo $value['Date'];? /td
/tr
tr
td colspan="2" hr / /td
/tr
?php
}
}else{
?
tr
td colspan="2" 该问题目前还没有用户回答，你可以在下面填写内容来回答 /td
/tr
?php
}
?
/table
/div
-- table
tr
td 你也回答一下吧： /td
/tr
tr
td
textarea rows="10" cols="80" id="answer" name="answer" /textarea
/td
/tr
tr
td a href="javascript:save_answer();" img 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"
table id="answerTable"
tr
td 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 ?php echo $value['Answer'];? /td
td
?php
if($_SESSION['ADMINISTRATOR']){//如果$_SESSION['ADMINISTRATOR']=0，即不是超级管理员，则不显示删除按钮
?
a href="javascript:deleteanswer( ?php echo $value['ID'];? " img src="/images/questiondelete.jpg" / /a
?php
}
?
/td
/tr
tr
td colspan="2" 回答者： ?php echo $value['Email'];? 回答时间： ?php echo $value['Date'];? /td
/tr
tr
td colspan="2" hr / /td
/tr
?php
}
}else{
?
tr
td colspan="2" 该问题目前还没有用户回答，你可以在下面填写内容来回答 /td
/tr
?php
}
?
/table
/div

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

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：PHP foreach什么时候复制

下一篇：php之数据类型