Cara menggunakan ajax api call javascript
Kali ini kita akan menggunakan API sederhana yang telah kita buat sebelumnya. Namun sebelumnya saya ingin menjelaskan dengan singkat apa itu AJAX. AJAX
Sekarang kita langsung coba consume API dari project yang telah kita buat dulu dengan menggunakan HTML dan AJAX. Pertama, kita sediakan project HTML biasa untuk consume API nya. Kita buat satu file HTML untuk tampilan dan satu folder berisi file javascript untuk consume API-nya. Kita buat file HTML dengan nama consume.html dan js/api.js Sebelumnya kita memerlukan jQuery untuk menjalankan AJAX ini, anda bisa menggunakan cdn ( https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js ) atau mendownloadnya dari github ( https://github.com/sogumontar/TutorialSpringboot/blob/master/Frontend/js/jquery.slim.min.js) Dan untuk membuat proses consume API-nya terlihat real, kita butuh GIF loading, yang bisa kita cari di internet, kemudian kita menempatkannya ke dalam sebuah tag, yang akan ditampilkan sebelum API ter-load. Setelah API berhasil di load, GIF loading tersebut akan di replace dengan data yang telah kita consume tadi Berikut code untuk consume.html Berikut code untuk file api.js nya Setelah selesai, kita bisa segera melakukan cosume API. caranya adalah: Sebelumnya kita harus memiliki backend untuk parsing API-nya, anda dapat mengunduhnya di sini.
dan hasilnya akan seperti berikut. Namun jika page tetap tidak meload data dari API, kemungkinan anda belum menghidupkan server spring boot nya, atau kemungkinan, link API yang anda consume berbeda dengan yang anda kenalkan di spring boot nya. Untuk source code, anda dapat mengunduhnya di sini : Jika terjadi masalah lain, anda bisa mencantumkannya di kolom komentar. View Discussion Improve Article Save Article View Discussion Improve Article Save Article AJAX (Asynchronous JavaScript and XML) is a set of tools used to make calls to the server to fetch some data. In this article, we will see how to implement a simple API call using AJAX. Prerequisites: Basic knowledge of AJAX and its function. You can learn all the basics from here. What are basic building? We will be fetching employee’s names from an employee object from a free API and displaying them inside a list. There are many API available for free on the internet. You can use any one of them. HTML Code: We have a button and to fetch data and an empty unordered list inside which we will be adding our list-items dynamically using JavaScript. htmlAJAX Code:
|