json_encode() function in PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PHP with Ajax & JSON</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="main">
<div id="header">
<h1>PHP with Ajax & JSON</h1>
</div>
<div id="load-data">
<table id="load-table" border="1" cellpadding="10px" width="100%">
<tr>
<th>Id</th>
<th>Student Name</th>
<th>Age</th>
<th>City</th>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$.ajax({
url: "fetch-json.php",
type: "POST",
data: {
id: 4
},
dataType: "JSON",
success: function(data) {
$.each(data, function(key, value) {
$("#load-table").append("<tr><td>" + value.id + "</td><td>" + value.student_name + "</td><td>" + value.age + "</td><td>" + value.city + "</td></tr>");
});
}
});
// $.getJSON(
// "fetch-json.php",
// function(data) {
// $.each(data, function(key,value){
// $("#load-table").append("<tr><td>" + value.id + "</td><td>" + value.student_name + "</td><td>" + value.age + "</td><td>" + value.city + "</td></tr>");
// });
// console.log(data);
// }
// );
</script>
</body>
</html>
Below is fetch-json.php File
<?php
include("mysqli_conn.php");
$sql = "SELECT * FROM students";
// $sql = "SELECT * FROM students WHERE id = {$_POST['id']}"; //For getting any particular record based on id
$result = $conn->query($sql);
// The fetch_all() / mysqli_fetch_all() function fetches all result rows and returns the result-set as an associative array, a numeric array, or both
// $output = mysqli_fetch_all($result); //Procedural style
$output = $result->fetch_all(MYSQLI_ASSOC); //Object oriented style
// echo "<pre>";
// print_r($output);
// echo "</pre>";
// The json_encode() function is used to encode a value to JSON format.
echo json_encode($output);
Below is css/style.css File
body {
font-family: arial;
background-color: #b2bec3;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
margin: 0;
}
#main {
width: 700px;
margin: 0 auto;
background: #ffffff;
font-size: 19px;
}
#header {
background: #6c5ce7;
color: #ffffff;
padding: 15px;
}
#load-data {
padding: 15px;
min-height: 500px;
}
Below is mysqli_conn.php File which is included in above Files.
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment