Here is the link to my code snippets: https://jsfiddle.net/dialcoding/5tx31g6z/11/
I know how to use the getJSON method from a JSON file, but I don't know how to retrieve a JSON that's generated from a PHP script so I can generate the table in html using jQuery. My output won't generate the html table that I want, however I can put an alert before the getJSON method that will show a JSON array was generated from the PHP script. I need some help understanding how to use the jQuery getJSON method to grab the JSON file generated from a PHP script so I can output an html table, please?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<label>Name:</label><input type="text" id="name">
<input id="name-submit" type="submit" value="Grab">
<br><br><br>
<div class="container">
<div class="table-responsive">
<table class="table tabe-bordered table-striped" id="employee_table">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>
</div>
</div>
</body>
</html>
php file:
<?php
if (isset($_POST['name']) === true && empty($_POST['name']) === false) {
include 'connect_db.php';
$json_array = array();
$sql = "SELECT * FROM forminput where forminput.name LIKE '%".$_POST['name']."%' ";
$result = $conn->query($sql);
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$json_array[] = $row;
}
} else {
echo "You query returned zero results!";
}
echo json_encode($json_array);
$conn->close();
}
JavaScript file:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$("#name-submit").on('click', function() {
var name = $('input#name').val();
if ($.trim(name) != '') {
$.post('content2.php', {name: name}, function(data) {
$.getJSON("content2.php", function(data) {
var employee_data = '';
$.each(data, function(key, value) {
employee_data += '<tr>';
employee_data += '<td>'+value.name+'</td>';
employee_data += '<td>'+value.age+'</td>';
employee_data += '</tr>';
});
$('#employee_table').append(employee_data);
});
})
}
});