This is another post in PHP using Ajax. In this post, you will learn how to add the most recently inserted data to the HTML table using Ajax with PHP script. For this reason, we do not want to retrieve complete data from the mysql database table, convert it to an HTML table and display it on the website. In simple words, if you've used Ajax with PHP, what happens if you insert data with Ajax with PHP? In the PHP script, you first ran the insert query command, and then looked for data from the full MySQL table, converted to an HTML table, and returned to the Ajax request.
But if you used Ajax, why did you keep getting full data from the table every time you inserted data? However, add the most recently inserted data to the existing table. When your script has finished inserting data, the latest insert details are sent in JSON format to the Ajax request, and in the Ajax success function, the json data is converted to table row format and from using the prepend () method we add an HTML table. Therefore, the user completes the sent data that was stored in the database, and from the database, the data was displayed on the web in HTML table format.
Here we have a simple process of inserting data into the MySQL table using PHP with Ajax and here with jQuery, which contains a row of the Ajax response compilation table received in JSON format. Therefore, jQuery added the Ajax result to the existing table without updating the website. If you don't know how to add Ajax return data to the HTML table, your question will become clear in this post. You can append data using the jQuery prepend () method from the top of the table and the jQuery append () method at the end of the table. Below you will find the complete source code and the online demo.
But if you used Ajax, why did you keep getting full data from the table every time you inserted data? However, add the most recently inserted data to the existing table. When your script has finished inserting data, the latest insert details are sent in JSON format to the Ajax request, and in the Ajax success function, the json data is converted to table row format and from using the prepend () method we add an HTML table. Therefore, the user completes the sent data that was stored in the database, and from the database, the data was displayed on the web in HTML table format.
Here we have a simple process of inserting data into the MySQL table using PHP with Ajax and here with jQuery, which contains a row of the Ajax response compilation table received in JSON format. Therefore, jQuery added the Ajax result to the existing table without updating the website. If you don't know how to add Ajax return data to the HTML table, your question will become clear in this post. You can append data using the jQuery prepend () method from the top of the table and the jQuery append () method at the end of the table. Below you will find the complete source code and the online demo.
Source Code
index.php
ect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$query = "SELECT * FROM tbl_sample ORDER BY id DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<html>
<head>
<title>How to Use Ajax PHP to Append Last Inserted Data to HTML Tables | Using AJAX to append database rows to HTML tables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">How to Use Ajax PHP to Append Last Inserted Data to HTML Tables</h2><br />
<h3 align="center">Add Details</h3>
<br />
<form method="post" id="add_details">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" class="form-control" required />
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" required />
</div>
<div class="form-group">
<input type="submit" name="add" id="add" class="btn btn-success" value="Add" />
</div>
</form>
<br />
<h3 align="center">View Details</h3>
<br />
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody id="table_data">
<?php
foreach($result as $row)
{
echo '
<tr>
<td>'.$row["first_name"].'</td>
<td>'.$row["last_name"].'</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#add_details').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"insert.php",
method:"POST",
data:$(this).serialize(),
dataType:"json",
beforeSend:function(){
$('#add').attr('disabled', 'disabled');
},
success:function(data){
$('#add').attr('disabled', false);
if(data.first_name)
{
var html = '<tr>';
html += '<td>'+data.first_name+'</td>';
html += '<td>'+data.last_name+'</td></tr>';
$('#table_data').prepend(html);
$('#add_details')[0].reset();
}
}
})
});
});
</script>
insert.php
<?php
//insert.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$data = array(
':first_name' => $_POST["first_name"],
':last_name' => $_POST["last_name"]
);
$query = "
INSERT INTO tbl_sample
(first_name, last_name)
VALUES (:first_name, :last_name)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$output = array(
'first_name' => $_POST['first_name'],
'last_name' => $_POST['last_name']
);
echo json_encode($output);
}
?>
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.