使用Ajax即时刷新

Question

I am trying to understand ajax and want to figure out how I can refresh a div that displays a rowcount from a mysql database live as the data is entered into that database.

I have a simple form on the same page and as the data is submitted from the form to the database how can I make the div update 'live' as well?

The code I've posted here posts a name from a form which is inserted into a mysql database. Then the number of rows in the database is counted and returned as a json object. It all works fine but only refreshes the rowcount when I reload the page and I want it to refresh instantly.

Many thanks.

The form

    <form class="form-inline" action="" id="myform" form="" method="post">
 <!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name"></label>  
  <div class="col-md-8">
  <input id="name" name="name" type="text" placeholder="name" class="form-control input-lg" required>
    </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit1"></label>
  <div class="col-md-4">
    <button id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button>
  </div>
</div>

</form>

<!---------Display rowcount from database--------->

The jquery

<script>
$(document).ready(function(){
$("#submitButtonId").on("click",function(e){
  e.preventDefault();

var formdata = $(this.form).serialize();
    $.post('data.php', formdata,
           function(data){

 //Reset Form
$('#myform')[0].reset(); 
          });

return false;
});
});
</script>
<script>

$(document).ready(function() { 

$.ajax({
                    url: 'data.php',
                    dataType: "json",
                    success: function (data) {
                    $("#count").append(data.count);
}
});    
                return false;  
});

</script>

data.php

<?php
//include db configuration file
include_once("db_conx.php");

$name= mysqli_real_escape_string($db_conx,$_POST['name']);
//Update Database
$stmt = $db_conx->prepare('INSERT INTO my_table set name?');
$stmt->bind_param('s',$name);
$stmt->execute();

//Count Rows
$sql="SELECT name FROM utility";
$query = mysqli_query($db_conx, $sql);
  // Return the number of rows in result set
  $rowcount=mysqli_num_rows($query);

// sending JSON output
$my_data=array(count=>"$rowcount");

echo json_encode($my_data,true);

?>

Answer 1

If you want the server to push events to the client, you can use Websockets. There are services like Pusher that can help, it has a free plan (100 connections, 200K messages per day) and a good documentation to integrate with PHP and some popular frameworks.

If you don't want to use websockets, you can use a more traditionnal polling : every X seconds, you make a GET request to the server asking for the count, if it changes you update it, if not you do nothing and wait for the next call. This can be setup easily with setTimeout() in Javascript.