<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
table, td, th{
border: 1px solid black;
padding: 10px 5px;
}
table{
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table tr th{
width: 150px;
}
</style>
</head>
<body>
<h1>AJAX example using PHP</h1>
<p>Select any continent for details</p>
<select>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>Oceania</option>
</select>
<div id="point"></div>
<script>
$(document).ready(function(){
$("select").change(function(){
$.post("/continent-json.php",{
data: $("select").val()
},function(data){
// Create table on fly.
var myTable = "<table><tbody><tr><th>Population</th><td>"+data.population+"</td></tr><tr><th>Area</th><td>"+data.area+"</td></tr><tr><th>top countries</th><td>"+data.countries+"</td></tr></tbody></table>";
$("#point").html(myTable);
});
});
// Trigger change() method only when the page load/refreshed.
$("select").trigger("change");
});
</script>
</body>
</html>