daily pastebin goal
66%
SHARE
TWEET

HTML with JS

a guest Aug 10th, 2018 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Food API</title>
  5.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  6.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  7. </head>
  8. <body>
  9. <div>
  10.   <button class="apireq">click me</button>
  11. </div>
  12. <div style="margin-top: 100px">
  13.  
  14.   <div id="loading">
  15.     <i class="fa fa-spinner fa-spin" style="font-size:24px; display:none"></i>
  16.   </div>
  17.  
  18.   <div id="data">
  19.  
  20.   </div>
  21.  
  22. </div>
  23. <script type="application/javascript">
  24.   $(document).ready(function() {
  25.     $('.apireq').click(function () {
  26.       $.ajax({
  27.         url: "http://localhost:8000/ajax/list_makanan",
  28.         dataType: "json",
  29.         beforeSend: function () {
  30.           $('#loading').show()
  31.         },
  32.         success: function (data) {
  33.           for (let i = 0; i < data.length; i++) {
  34.             $('#data')
  35.               .append('<p>Nama Makanan : '
  36.                 + data[i].name + '</p>');
  37.             $('#data')
  38.               .append('<p>Harga : '
  39.                 + data[i].harga + '</p>');
  40.             $('#data')
  41.               .append('<p>Keterangan : '
  42.                 + data[i].keterangan + '</p>');
  43.           }
  44.         }
  45.       });
  46.     });
  47.   });
  48. </script>
  49. </body>
  50. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top