Brief analysis of the realization of PHP page local refresh function
- 2020-06-15 07:58:51
- OfStack
There are a lot of ways. It used to be more common to do this with iframe. Now there is an ajax, so ajax is generally used.
The first method, ajax implementation:
Of course, ajax is pretty straightforward to use, but much of the knowledge is a bit deep. I used ajax to do page time refresh. The complete code is:
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(" Beijing time. Y years m month d day H:i:s",$date-$nowTime);
if($showtime<=" Beijing time. 1970 years 01 month 01 day 08:00:00"){
echo "happy new year";
}
echo $showtime;
2.zidong.php:
</head>
<body>
<h1>Ajax Dynamic display time </h1>
<input type="button" value=" Start display time " id="go" onclick="start()" />
<p> Current time: <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>
Access zidong. php directly in the browser, click the button inside to see the effect.
This is a small example of refreshing the local content of a page with ajax. You might wonder: Isn't there any interaction with the database? This is not easy, just use the getTime.php page.
I don't need to say much about this method. As for what the code in ajax means, don't ask me, as I've said before, ajax is a bit deep.
Method 2: Implement using the iframe method.
Don't tell me include with PHP is ok. You can try it. Can, can not have so many people to ask inside Baidu.
This method is complicated, but it's actually quite simple. Here's how it works:
In the page to be refreshed, the local code to be automatically refreshed is taken out separately and made into a separate page. There are many ways to automatically refresh: javascript can be used to control what setTimeout("start()",1000) is used in this separate page. Or setInterval (start "()", 1000); (Refresh the page every 1 second) In this way, you can also use the meta tag to achieve: < meta http-equiv="Refresh" content="10" > Refresh the page every 10 seconds. This is done using iframe to invoke it from the original page. That will do.
Let's go back to the above sample code:
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">
// The following isKeyTrigger (), ctrlEnter (), submitContent The () method is submitted in response to a keyboard event. Compatibility is good.
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(); // Refresh the page
} else {
alert( $rs.msg );
}
}
});
}
// Delete the answer
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(); // Refresh the page
} else {
alert( $rs.msg );
}
}
});
}
else{
return;
}
}
//// Set to best answer
//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(); // Refresh the page
// } else {
// alert( $rs.msg );
// }
// }
// });
// }
// else{
// return;
// }
//
//}
</script>
<!--<script language="javascript">-->
<!--setInterval("myajax();",1000);-->
<!--function myajax()-->
<!--{-->
<!-- // Access to information json An array of -->
<!-- var html2 = "";-->
<!-- html2 = "<table id=\"answerTable\"><tr><td class=\"answerHead\" colspan=\"2\"> Answer: "+-->
<!-- "</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\"> Respondents: "+-->
<!-- "<?php echo $value['Email'];?>"+-->
<!-- " Answer time: "+-->
<!-- "<?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\"> There is no user's answer to this question. You can answer it by filling in below </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"> Detailed list of product questions and answers </th>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
<tr>
<td class="questionHead" colspan="2"> Details of the problem :</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"> Questioner: <?php echo $questionUser['Email'];?> Question time: <?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"> Answer: </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']){// if $_SESSION['ADMINISTRATOR']=0 , which is not a super administrator, does not display the delete button
?>
<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"> Respondents: <?php echo $value['Email'];?> Answer time: <?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"> There is no user's answer to this question. You can answer it by filling in below </td>
</tr>
<?php
}
?>
</table>
</div>
--><table class="youWrite">
<tr>
<td> You have to answer 1 Bottom: </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">
// Delete the answer
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(); // Refresh the page
} else {
alert( $rs.msg );
}
}
});
}
else{
return;
}
}
</script>
<div id="answerDiv" class="answerDiv">
<table id="answerTable">
<tr>
<td class="answerHead" colspan="2"> Answer: </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']){// if $_SESSION['ADMINISTRATOR']=0 , which is not a super administrator, does not display the delete button
?>
<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"> Respondents: <?php echo $value['Email'];?> Answer time: <?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"> There is no user's answer to this question. You can answer it by filling in below </td>
</tr>
<?php
}
?>
</table>
</div>
That's it. You can see this by visiting show.php in your browser. But there's a lot of stuff in this example that works with the database. Direct access has no effect. But the code definitely works. The principles and code are complete.
Ok. These two methods are described here. With these two methods it is possible to do almost all page partial refreshes.