Using jQuery to build table rows from AJAX response(json)


dailyaspirants.com

                                       AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh.


Syntax:

  [selector].load( URL, [data], [callback] );


URL:



                       The request url sent to server-side and it should be php ,jsp ,asp script to generate data and  get from the database

data: 

                 It should be passed parameter to specified  request like POST and GET Method.

Call back:

                       A callback function invoked after the response data has been loaded into the elements of the matched set.



ajax2.php 

<html>
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function(){
          $("#details").click(function(event){
          $("#displaytable").load('/array/result1.html');       
});
});
  </script>
  </head>
  <body>
 <div id="displaytable"></div>
<input type="button" id="details" value="show table"/>
</body>
</html>


result1.html

<html>
  <head>
     <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</body>
</html>

output:



#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter


Post a Comment

Previous Post Next Post