I have the working code which fetches all the records from the
json, but how can I make it available one by one on the click of the button or link?
The following code is working to fetch all the records:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery PHP
Json Response</title>
<style type="text/css">
div
{
text-align:center;
padding:10px;
}
#msg {
width: 500px;
margin: 0px auto;
}
.members {
width: 500px ;
background-color: beige;
}
</style>
</head>
<body>
<div id="msg">
<table id="userdata" border="1">
<thead>
<th>Email</th>
<th>Sex</th>
<th>Location</th>
<th>Picture</th>
<th>audio</th>
<th>video</th>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url="
json.php";
$("#userdata tbody").html("");
$.getJSON(url,function(data){
$.each(data.members, function(i,user){
var tblRow =
"<tr>"
+"<td>"+user.email+"</td>"
+"<td>"+user.sex+"</td>"
+"<td>"+user.location+"</td>"
+"<td>"+"<img src="+user.image+">"+"</td>"
+"<td>"+"<audio src="+user.video+" controls>"+"</td>"
+"<td>"+"<video src="+user.video+" controls>"+"</td>"
+"</tr>" ;
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
</body>
</html>
I used the json_encode function in the php file to encode the sql db.
How can i achieve this?
