Question

关于如何在不刷新的情况下自动更新网页，我遇到了这个问题。有人可以建议并向我解释一下解决问题的最佳方法是什么？提前致谢

add.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

Answer 1

您想要使用ajax和jquery。这样的事情应该有效：

<强> add.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>

我会将保存和学生列表合并到一个文件中：

$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);

Answer 2

这需要在三个单独的文件中吗？至少，你能结合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>

您可能希望在上面的$ .post调用中进行一些测试，以确保它已正确处理。在docs中了解更多相关信息。

如果你真的需要三个文件，那么你可能需要使用ajax在studentlist.php上使用setTimeout进行某种轮询来查看你是否有任何新项目。

Answer 3

廉价方式是使用元刷新来刷新页面（或使用JavaScript setInterval和ajax）。

更昂贵的方法是使用Realtime JavaScript应用程序。看看Socket.IO或类似的东西。

无需刷新即自动更新其他页面

3 个答案: