HTML with JS

<!DOCTYPE html>
<html>
<head>
  <title>Food API</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
  <button class="apireq">click me</button>
</div>
<div style="margin-top: 100px">

  <div id="loading">
    <i class="fa fa-spinner fa-spin" style="font-size:24px; display:none"></i>
  </div>

  <div id="data">

  </div>

</div>
<script type="application/javascript">
  $(document).ready(function() {
    $('.apireq').click(function () {
      $.ajax({
        url: "http://localhost:8000/ajax/list_makanan",
        dataType: "json",
        beforeSend: function () {
          $('#loading').show()
        },
        success: function (data) {
          for (let i = 0; i < data.length; i++) {
            $('#data')
              .append('<p>Nama Makanan : '
                + data[i].name + '</p>');
            $('#data')
              .append('<p>Harga : '
                + data[i].harga + '</p>');
            $('#data')
              .append('<p>Keterangan : '
                + data[i].keterangan + '</p>');
          }
        }
      });
    });
  });
</script>
</body>
</html>