jQuery getJSON MySQL Database


posts.php

<!DOCTYPE html>
<html>
<head>
<title>Post Result Data</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<style type="text/css">
*{
font-size: arial;
font-size: 14px;
}
</style>
</head>
<body>
<table border="1" id="usertable">
<tr>
<th>Id</th>
<th>Username</th>
<th>Userpass</th>
</tr>
<tbody>

</tbody>
</table>
<script type="text/javascript">
$(document).ready(function($) {
$.getJSON( "postsdata.php", function(data) {
var getData = data.message;
var len = getData.length;
var table = $('#usertable');
var tr = '';
for(i = 0 ; i<len; i++){
tr+='<tr><td>'+getData[i].id+'</td><td>'+getData[i].username+'</td><td>'+getData[i].userpass+'</td></tr>';
}
table.append(tr);
// debugger;
});
});
</script>
</body>
</html>


postsdata.php
<?php 
$db = mysql_connect('localhost','root','');
mysql_select_db('db_school',$db);
$sql = "SELECT * FROM userlogin";
$result = mysql_query($sql,$db);
// print '<pre>';
$datArr = array();
while($row = mysql_fetch_array($result)){
$datArr[] = $row;
}
echo json_encode(array('message'=>$datArr));

?>

Demo 


Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Post a Comment