Thursday, 2 June 2016

Load JSON Data using Ajax getJSON Method

           , ,      1 comment   


Friends if you have knowledge how to load JSON data using php programming language but here we show you how to load json data from file using jquery Ajax get json method. JSON is lighter than xml and it is also faster than xml and the syntax of JSON is very simple and we can very easier parsing it. By using this Ajax getJSON() method we can load data from JSON file without refreshing of page. This is simple description, you can get more information in video which I have attached with this post. In that video I have illustrate this things in very details.

Source Code


 [  
      {  
           "video_title":"Just for checking"  
      },  
      {  
           "video_title":"Exporting MySQL data to Excel in PHP - PHP Tutorial"  
      },  
      {  
           "video_title":"Live Table Add Edit Delete using Ajax Jquery in PHP Mysql"  
      },  
      {  
           "video_title":"Make SEO Friendly or Clean Url in PHP using .htaccess"  
      },  
      {  
           "video_title":"How to Add Watertext or Watermark to an Image using PHP GD Library"  
      },  
      {  
           "video_title":"Create Simple Image using PHP"  
      },  
      {  
           "video_title":"How to check Multiple value exists in an Array in PHP"  
      },  
      {  
           "video_title":"How to merge two PHP JSON Array"  
      },  
      {  
           "video_title":"How To Insert Data Using Stored Procedure In Php Mysql"  
      },  
      {  
           "video_title":"How to check Username availability using php, Ajax, Jquery and Mysql"  
      },  
      {  
           "video_title":"Rename uploaded image in php with upload validation"  
      },  
      {  
           "video_title":"How to generate simple random password in php?"  
      },  
      {  
           "video_title":"Auto Refresh Div Content Using jQuery and AJAX"  
      },  
      {  
           "video_title":"Insert Update Delete using Stored Procedure in Mysql and PHP"  
      },  
      {  
           "video_title":"Test Video Title for check"  
      }  
 ]

load_json_data_jquery.php


 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Load JSON Data using Ajax getJSON Method</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br />  
           <div class="container" style="width:600px;">  
                <h3 align="">Load JSON Data using Ajax getJSON Method</h3><br />  
                <button class="btn btn-info">Load Video List JSON Data</button>  
                <table class="table table-bordered" style="display:none;">  
                     <tr>  
                          <th>Video Title</th>  
                     </tr>  
                </table>  
           </div>  
           <br />  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $("button").click(function(){  
           $("table").show();  
           $.getJSON("video.json", function(data){  
                $.each(data, function(key, value){  
                     $("table").append("<tr><td>"+value.video_title+"</td></tr>");  
                });  
           });  
      });  
 });  
 </script>

1 comment: