自动更新其他页面而不刷新

Automatically update another page without refreshing

本文关键字:刷新 更新 其他      更新时间:2023-09-26

我有这个问题,我如何可以自动更新我的网页而不刷新。谁能建议并解释一下解决我的问题的最好方法是什么?提前感谢

. php文件在这个php文件中,我将只询问用户名。

 <form id="form1" name="form1" method="post" action="save.php">
      <input type="text" name="firstname" id="firstname"/>
      <input type="text" name="lastname" id="lastname"/>
      <input type="submit" name="add" id="add" value="add"/>
 </form>

save.php在这个文件中,我将把值保存到数据库中。

  $firstname=isset($_POST['firstname'])? $_POST['firstname'] : '';
  $lastname=isset($_POST['lastname'])? $_POST['lastname'] : '';
  $sql="Insert into student (sno,firstname,lastname) values ('','$firstname','$lastname')";
  $sql=$db->prepare($sql);
  $sql->execute();

studentlist.php在这个文件中,我想显示我输入的名字

  $sql="Select firstname, lastname from student";
  $sql=$db->prepare($sql);
  $sql->execute();
  $output="The List of students <br></br>";
  while($result=$sql->fetch(PDO::FETCH_ASSOC))
  {
   $output.="".$result['firstname']." ".$result['lastname']."<br></br>";
  }

当两个页面打开时,我需要刷新studentlist.php才能看到最近添加的数据。

谢谢:D

您需要使用ajax和jquery。像这样的代码应该可以工作:

. php

添加到文档的头部:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){//loads the information when the page loads
  var saveThenLoad = {
        url: "save.php",//the file sending data to
        type:      'POST',//sends the form data in a post to save.php
        dataType: 'json',   
        success : function(j) {
            if(j.error = 0){
               $("#student_info").html(j.info);//this will update the div below with the returned information
            } else {
               $("#student_info").html(j.msg);//this will update the div below with the returned information
            }
        }
    }
//grabs the save.submit call and sends to the ajaxSubmit saveThenLoad variable    
  $("#save").submit(function() {
    $(this).ajaxSubmit(saveThenLoad); 
     return false;
  });   
//grabs the submit event from the form and tells it where to go. In this case it sends to #save.submit above to call the ajaxSubmit function
  $("#add").click(function() {      
    $("#save").submit();
  });
});
</script>
<!-- put this in the body of the page. It will wait for the jquery call to fill the data-->
<div id="student_info">
</div>

我将把savestudentlist合并成一个文件,像这样:

$return['error']=0;
$return['msg']='';
$firstname=isset($_POST['firstname'])? $_POST['firstname'] : '';
$lastname=isset($_POST['lastname'])? $_POST['lastname'] : '';
$sql="Insert into student (sno,firstname,lastname) values ('','$firstname','$lastname')";
$sql=$db->prepare($sql);
if(!$sql->execute()){
  $return['error']=1;
  $return['msg']='Error saving data';
}
$sql="Select firstname, lastname from student";
$sql=$db->prepare($sql);
if(!$sql->execute()){
  $return['error']=1;
  $return['msg']='Error retrieving data';
}
$output="The List of students <br></br>";
while($result=$sql->fetch(PDO::FETCH_ASSOC))
{
   $output.="".$result['firstname']." ".$result['lastname']."<br></br>";
}
$return['$output'];
echo json_encode($return);

是否需要在三个单独的文件中?至少,你能把add.php和studentlist.php结合起来吗?如果是这样,那么jQuery可能是最好的选择。您可能还想使用一些html标记,以便更容易地向DOM动态添加元素。

以下是合并后的文件:

<form id="form1" name="form1">
      <input type="text" name="firstname" id="firstname"/>
      <input type="text" name="lastname" id="lastname"/>
      <input type="submit" name="add" id="add" value="add"/>
 </form>
  The List of students <br></br>
  <ul id="student-list">
<?php
 //I assume you're connecting to the db somehow here
  $sql="Select firstname, lastname from student";
  $sql=$db->prepare($sql);
  $sql->execute();
  while($result=$sql->fetch(PDO::FETCH_NUM)) //this might be easier to output than an associative array
  {
  //Returns will make your page easier to debug
   print "<li>" . implode(" ", $result) . "</li>'n"; 
  }
?>
  </ul>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
    $('#form1').submit(function(event){
        event.preventDefault();
        //submit the form values
        var firstname = $('#firstname').val(); 
        var lastname = $('#lastname').val();
        //post them
        $.post( "test.php", { firstname: firstname, lastname: lastname })
           .done( function(data) {
        //add those values to the end of the list you printed above
               $("<li>" + firstname + ' ' + lastname + "</li>").appendTo('#student-list');                  
           });
        });
    });
</script>

您可能需要在$中做一些测试。在上面的电话中确保它得到了正确的处理。在文档中了解更多。

如果您确实需要三个文件,那么您可能需要使用ajax对studentlist.php进行某种轮询,使用setTimeout来查看是否有任何新项目。

最便宜的方法是使用元刷新来刷新您的页面(或使用JavaScript setInterval和ajax)。

更昂贵的方法是使用实时JavaScript应用程序。看看插座。IO之类的