<html>
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
</head>
<body>
<input type = "button" value = "Load data" id = "load-data"> // button using for click events to load data
<div id = "show-data"></div> //div for load data
<script> //jquery ajax script to load data from php file getdata.php
$(document).ready(function(){
function call(){
$.ajax({
url:"getdata.php",
type:"POST",
success:function(data){
$("#show-data").html(data);
}
})
//getdata.php file
<?php
$connect = mysql_connect("localhost","root",""); //database connection string
mysql_select_db("portal", $connect);
$sql =mysql_query("select * from data");
while($result = mysql_fetch_array($sql))
{
?>
<table border = "1">
<tr>
<td><?php echo $result['username']; ?></td> <td><?php echo $result['password']; ?></td>
<td><button class = "edit-btn" data-eid = "<?php echo $result['id']; ?>">Edit</button></td>
<td><button class = "delete-btn" data-id = "<?php echo $result['id']; ?>">Delete</button></td>
</tr>
</table>
<?php
}
?>
</body>
</html>
Choose the right course and start building your future with practical skills.
Learn HTML, CSS, JavaScript, and PHP to build modern, responsive websites and real-world projects.
Enroll Now See Full Details
Understand electronics basics with hands-on breadboard projects and circuit building techniques.
Enroll Now See Full Details
Step into AI with real-world applications, automation tools, and smart development techniques.
Enroll Now See Full Details