The finest example using ajax, PHP, and MySQL is what I’ve presented. Therefore, you can learn how to view all data using Ajax in PHP and MySQL. Simple explanations are provided for each stage.
- You need to create an HTML form that will allow the user to input the data they want to select. The form should contain inputs for the data you want to select, as well as a submit button.
- You need to create a database table to store the data you want to select. You can do this using SQL commands in a database management tool like PHPMyAdmin.
- When the user submits the form, you need to use JavaScript to send the data to the server using an Ajax request. The Ajax request should be sent to a PHP script that will handle the selection.
- In the PHP script, you need to extract the data from the Ajax request and use an SQL SELECT statement to select the corresponding data from the database.
HTML From:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <button id="showdata">Show All User Data</button> <div id="all-data-user-table"></div> </body> </html>
JavaScript/Ajax code:
jQuery(document).ready(function(){
jQuery('#showdata').on('click', function(e) {
e.preventDefault();
jQuery.ajax({
url: "view.php",
type: "POST",
dataType: "html",
success: function(data){
jQuery("#all-data-user-table").html(data);
}
});
});
});
PHP code:
<?php
$conn = mysqli_connect("localhost", "root", "", "database");
$result = mysqli_query($conn,"SELECT * FROM table_name ");
?>
<table class="all-record">
<tbody>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Email</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<?php
if(mysqli_num_rows($result) == 0){
?>
<tr><th colspan="4"><?php echo "<p>No results found<p>"; ?></th></tr>
<?php
}else{
while( $row = mysqli_fetch_assoc( $result ) ){
$id = $row['id'];
?>
<tr>
<td><?php echo $row['id']?></td>
<td><?php echo $row['name']?></td>
<td><?php echo $row['email']?></td>
<td>
<span class='edit-all-data' data-id='<?php echo $id; ?>'>Edit</span>
</td>
<td>
<span class='delete-all-data' data-id='<?php echo $id; ?>'>Delete</span>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
?>
