自动更新另一个页面而无需刷新

Question

I have this problem on how I could automatically update my webpage without refreshing. Could someone suggest and explain to me what would be the best way to solve my problem? Thanks in advance

add.php file In this php file, I will just ask for the name of the user.

 <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 In this file, I will just save the value into the database.

  $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 In this file, i want to display the name I enter

  $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>";
  }

Problem When the two pages is open, I need to refresh the studentlist.php before i can see the recently added data.

thanks :D

Answer 1

You'll want to use ajax and jquery. Something like this should work:

add.php

add to the head of the document:

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

I would combine save and studentlist into one file like this:

$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

Does this need to be in three separate files? At the very least, could you combine add.php and studentlist.php? If so, then jQuery is probably the way to go. You might also want to use some html tags that would make it easier to dynamically add elements to the DOM.

Here's the combined files:

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

You might want to do some testing in in the $.post call above to make sure it was handled properly. Read more about that in the docs .

If you really need three files, then you'll might need to use ajax to do some sort of polling on studentlist.php using setTimeout to see if you have any new items.

Answer 3

The cheap-way is using a meta-refresh to refresh your page (or use JavaScript setInterval and ajax).

The more expensive way is having a Realtime JavaScript application. Look at Socket.IO or something like that.