Load data using php and jquery ajax

<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>



Explore Our YouTube Tutorials

Dive into our YouTube tutorials to access high-quality learning content on web development, design, and technology. Each video is crafted to provide clear guidance and hands-on knowledge for skill development.

 


Upgrade Your Skills with Our Courses

Choose the right course and start building your future with practical skills.

Web Development

Learn HTML, CSS, JavaScript, and PHP to build modern, responsive websites and real-world projects.

Enroll Now See Full Details

Breadboard Learning

Understand electronics basics with hands-on breadboard projects and circuit building techniques.

Enroll Now See Full Details

AI Training

Step into AI with real-world applications, automation tools, and smart development techniques.

Enroll Now See Full Details