Skip to main content

AJAX basic (get data) 

  • *** At first go to xampp or any localserver
  • create a database called samples and inside samples database
  • create a table called student
  • inside student table create id (primary key) int Auto increment, 
  • roll, name, address, stream, status of string type

<?php
include("connection.php");
mysqli_select_db("samples",$con);
$result=mysqli_query("select * from student",$con);

echo "<table border='1' >
<tr>
<td align=center> <b>Roll No</b></td>
<td align=center><b>Name</b></td>
<td align=center><b>Address</b></td>
<td align=center><b>Stream</b></td></td>
<td align=center><b>Status</b></td>";

while($data = mysqli_fetch_row($result))
{   
    echo "<tr>";
    echo "<td align=center>$data[0]</td>";
    echo "<td align=center>$data[1]</td>";
    echo "<td align=center>$data[2]</td>";
    echo "<td align=center>$data[3]</td>";
    echo "<td align=center>$data[4]</td>";
    echo "</tr>";
}
echo "</table>";
?>
<html>
 <script type="text/javascript" src="jquery-1.3.2.js"> </script>

 <script type="text/javascript">

 $(document).ready(function() {

    $("#display").click(function() {                

      $.ajax({    //create an ajax request to display.php
        type: "GET",
        url: "display.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response); 
            //alert(response);
        }

    });
});
});

</script>

<body>
<h3 align="center">Manage Student Details</h3>
<table border="1" align="center">
   <tr>
       <td> <input type="button" id="display" value="Display All Data" /> </td>
   </tr>
</table>
<div id="responsecontainer" align="center">

</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Laravel Vuejs Basic Setup

In this article we will see how to setup vue with laravel. 1) Create a laravel project: laravel new laravue 2) In web.php create a temporary route:  Route :: get ( '/test' ,  function  () {      return   view ( 'welcome' ); }); So, when you will see the welcome page once you hit the  http://laravue.test/test  url. 2) In terminal run:  npm install 3) npm install vue (In package.json file you will see that vue dependency has been added successfully) 4) Now go to resources -> js -> app.js file. Here we will have to load the vue. write the following lines in app.js.  require ( './bootstrap' ); window . Vue  =  require ( 'vue' ); const   app  =  new   Vue ({      el :   '#app' }); (Here, vue js will execute and control anything that will be inside the app id. So, for our example  let's put the app id inside the welcome view). So, inside welcome.blade.php 's body...
Post a Comment
Read more