当mysql数据库发生变化时，动态更改网站内容

Question

I have a form like this in index.php file.

<form >
    <input type="text" id="fname" >
    <input type="text"  id="lanme" >
    <input type="button" id="submit" value="send">
</form>

I receive two input from user.when user click on send button a jquery function called and send fname and lname to record.php file.this is jquery function.

$(document).ready (function() {
    $("#submit").click(fucntion(){
        $fname=$("#fname").val();
        $lanme=$("#lname").val();
        $.post("record.php") , { fname: fname , lname : lname }).done(function(data){
            alert(data);
        });
    });
});

and this is record.php file

<?php 
    $fname=$_POST['fname'];
    $lanme=$_POST['lanme'];
    $mysqli=new mysqli(host,username,password,database);
    $stmt=$mysqli->prapare("INSERT INTO info (fname , lname) VALUES (?,?))";
    $stmt->bind_param("ss",$fname , $lname);
    $stmt->execute();
 ?>

In index.php I print the "table" .i use this code to print table in index.php file.

<?php
try {
    $dbh = new PDO('mysql:host=HOST;dbname=DATABASENAME', $user, $password);
    $sth = $dbh->prepare('SELECT * from info ');
    $sth->execute();
    $result = $sth->fetchAll();
} catch (PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
}

?>
<table>
<tbody>
<tr>
    <td>fname</td>
    <td>lname</td>
</tr>
<?php foreach($result as $row) : ?>
<tr>
    <td><?php echo $row[0] ; ?></td>
    <td><?php echo $row[1] ; ?></td>
</tr> 
<?php endforeach ; ?>
</tbody>
</table>

All the above code work and I don't have any problems with it.

When user enters the value fname and lname and click on the send button, fname and lname send to the server and store in data base. If user wants to see result in table he/she must refresh page, but I want to show result on table without refreshing the page. Otherwise when user clicks on the send button and send the data the table in the index.php dynamically change and dynamically show the result to the user.

Answer 1

You have to add the row manually (from js). In my script i use the underscore library:

var template = _.template('<tr><td><%= fname %></td><td><%= lname %></td></tr>');

$.post("record.php", {fname: fname, lname : lname}).done(function() {
    $('table tr:last-child').after(template({fname: fname, lname: lname});
});

BTW: You should use PDO or mysqli not both.