<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="//code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>PHP Basic Get JASON</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<h1>Basic Get JSON Data</h1>
<p>As basic as it gets</p>
<p>Get JSON Data VIA HTML AJAX jQuery PHP</p>
</div><!-- .col -->
</div><!-- .row -->
<div class="row">
<div class="col p-1">
<button type="button" class="btn btn-primary" id="btn">Click To See JSON Response</button>
</div><!-- .col -->
</div><!-- .row -->
<div class="row">
<div class="col p-1">
<div class="p-3 m-2" id="displayHere"></div>
</div><!-- .col -->
</div><!-- .row -->
<div class="row"><div class="col p-5 m-5"><br />
</div><!-- .col --></div>
</div><!-- .container-fluid -->
<script>
$(function() {
$(document).delegate("#btn", "click", function () {
$.ajax({
type: "GET",
url: 'getJSON.php',
success: function (response) {
console.log("AJAX Response JSON Object => " + response);
response = JSON.parse(response);
console.log("Parsed out -> " + response);
console.log("First Name: " + response.first_name + " Last Name: " + response.last_name);
$( "div#displayHere" ).append( "<p> First Name: " + response.first_name + "<br /> Last Name: " + response.last_name) + "</p>";
}
});
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</body>
</html>
--PHP File --
<?php
$result = ["first_name" => "Bruce","last_name" => "Wayne"];
echo json_encode($result);
?>