Secara default, saat kami mengirimkan formulir di halaman web, secara otomatis menyegarkan halaman setelah mengirimkan data formulir ke server web. Namun terkadang Anda mungkin ingin mencegah penyegaran halaman saat pengiriman formulir. Ini diperlukan jika Anda perlu mengirim data formulir melalui AJAX. Pada artikel ini, kita akan belajar bagaimana mencegah penyegaran halaman pada pengiriman formulir
Cara Mencegah Penyegaran Halaman pada Pengiriman Formulir
Katakanlah Anda memiliki formulir berikut
<form id='myform'> ... </form>Anda dapat mencegah penyegaran halaman menggunakan JavaScript biasa, atau pustaka pihak ketiga seperti jQuery. Kami akan melihat kedua metode ini
1. Menggunakan JavaScript
Berikut adalah kode untuk mencegah penyegaran halaman menggunakan JavaScript
var form = document.getElementById("myform"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm);_Pada kode di atas, pertama-tama kita mendapatkan elemen form dari ID-nya. Kemudian kita mendefinisikan event handler untuk form tersebut, yang disebut handleForm. Kami mendefinisikannya untuk memanggil event. preventDefault() yang pada dasarnya menonaktifkan perilaku default elemen saat handler dipicu. Alternatifnya, Anda juga dapat mengembalikan nilai salah di sini. Dalam hal ini, perilaku default adalah penyegaran halaman. Terakhir, kami menambahkan event handler ini ke event 'submit' dari form
2. Menggunakan jQuery
Anda juga dapat menggunakan jQuery untuk mencegah penyegaran halaman
$("#myform").submit(function(e) { e.preventDefault(); });Di sini kita langsung memanggil e. fungsi preventDefault() di mana e adalah singkatan dari event, pada fungsi submit(), yang merupakan event handler untuk jQuery. Alih-alih memanggil fungsi preventDefault(), Anda juga dapat mengembalikan nilai salah di sini
3. Menggunakan atribut onsubmit
Anda juga dapat menggunakan atribut onsubmit dari elemen formulir, untuk menentukan fungsi mana yang akan dipanggil, dan menonaktifkan penyegaran halaman
<form id="myform" onsubmit="yourFunction();return false"> ... </form>Dalam kode di atas, saat formulir dikirimkan, yourFunction() dipanggil terlebih dahulu, lalu false dikembalikan, sehingga mencegah perilaku default penyegaran halaman
Dalam JavaScript, Anda menyegarkan halaman menggunakan document.location.reload(). Anda dapat menambahkan kata kunci true_ untuk memaksa halaman yang dimuat ulang berasal dari server (bukan cache). Atau, Anda dapat menggunakan kata kunci false untuk memuat ulang halaman dari cache
Kode ini dapat dipanggil secara otomatis pada suatu peristiwa atau hanya ketika pengguna mengklik tautan
Contoh Kode Refresh JavaScript
Berlari
Stack editor Unstack editor
Pratinjau Editor
Segarkan Otomatis
Anda juga dapat menggunakan JavaScript untuk menyegarkan halaman secara otomatis setelah jangka waktu tertentu. Di sini, kami menyegarkan halaman 5 detik setelah halaman dimuat. Hal ini mengakibatkan halaman terus menerus disegarkan setiap 5 detik
Berlari
Stack editor Unstack editor
Pratinjau Editor
Anda dapat mencapai efek yang sama menggunakan tag meta HTML
Trik Refresh Lainnya
Dengan menyertakan kode penyegaran dalam suatu fungsi, Anda dapat memiliki kontrol penuh saat halaman disegarkan
Contoh 1
Alih-alih memanggil fungsi "penyegaran halaman" secara otomatis saat halaman dimuat, Anda dapat memanggilnya hanya saat pengguna melakukan beberapa tindakan - seperti mengklik tautan
Berlari
Stack editor Unstack editor
Pratinjau Editor
Contoh 2
Anda dapat menggunakan pernyataan bersyarat untuk menentukan apakah akan menyegarkan halaman atau tidak. Berikut adalah contoh dasar penggunaan kotak "konfirmasi" untuk menanyakan kepada pengguna apakah boleh menyegarkan halaman
Berlari
Stack editor Unstack editor
Pratinjau Editor
Dengan memasukkan kode penyegaran dengan fungsi JavaScript, Anda dapat memicu penyegaran kapan saja yang masuk akal untuk aplikasi web Anda
Penyegaran HTML
Contoh di atas hanya akan berfungsi selama pengguna mengaktifkan JavaScript di browser mereka. Anda juga dapat menggunakan HTML untuk menyegarkan halaman secara otomatis setelah halaman dimuat. Ini dicapai dengan menggunakan tag meta HTML
Saat Anda mengembangkan aplikasi seperti blog atau halaman yang datanya dapat berubah berdasarkan tindakan pengguna, Anda pasti ingin halaman tersebut sering disegarkan
Saat halaman disegarkan atau dimuat ulang, data baru apa pun akan ditampilkan berdasarkan interaksi pengguna tersebut. Kabar baik – Anda dapat menerapkan jenis fungsi ini dalam JavaScript dengan satu baris kode
Pada artikel ini, kita akan mempelajari cara memuat ulang halaman web dalam JavaScript, serta melihat beberapa situasi lain di mana kita mungkin ingin mengimplementasikan pemuatan ulang ini dan cara melakukannya
Inilah Scrim Interaktif tentang Cara Menyegarkan Halaman di JavaScript
Cara Menyegarkan Halaman di JavaScript Dengan location.reload()
Anda dapat menggunakan metode JavaScript location.reload()_ untuk memuat ulang URL saat ini. Metode ini berfungsi mirip dengan tombol Refresh browser
Metode reload()_ adalah metode utama yang bertanggung jawab untuk memuat ulang halaman. Di sisi lain, location adalah antarmuka yang mewakili lokasi sebenarnya (URL) dari objek yang ditautkan – dalam hal ini URL halaman yang ingin kita muat ulang. Itu dapat diakses melalui document.location atau <button type="button" onClick="window.location.reload()"> Reload Page </button> 0
Berikut ini adalah sintaks untuk memuat ulang halaman
window.location.reload();Catatan. Ketika Anda membaca beberapa sumber tentang "memuat ulang halaman dalam JavaScript", Anda akan menemukan berbagai penjelasan yang menyatakan bahwa metode relaod menggunakan nilai boolean sebagai parameter dan bahwa <button type="button" onClick="window.location.reload()"> Reload Page </button> 1 membantu memuat ulang secara paksa untuk mem-bypass cache-nya. Tapi ini bukan masalahnya
Menurut Dokumentasi MDN, parameter boolean bukan bagian dari spesifikasi saat ini untuk location.reload() — dan sebenarnya tidak pernah menjadi bagian dari spesifikasi apa pun untuk location.reload() yang pernah diterbitkan
Browser seperti Firefox, di sisi lain, mendukung penggunaan parameter boolean non-standar yang dikenal sebagai <button type="button" onClick="window.location.reload()"> Reload Page </button> 4 untuk location.reload(), yang menginstruksikan Firefox untuk mem-bypass cache-nya dan memuat ulang dokumen saat ini secara paksa
Selain dari Firefox, parameter apa pun yang Anda tentukan dalam panggilan location.reload() di browser lain akan diabaikan dan tidak berpengaruh
Cara Melakukan Muat Ulang/Segarkan Halaman di JavaScript Saat Tombol Diklik
Sejauh ini kita telah melihat cara kerja reload di JavaScript. Sekarang mari kita lihat bagaimana Anda dapat menerapkan ini ketika suatu peristiwa terjadi atau ketika tindakan seperti klik tombol terjadi
Catatan. Cara kerjanya mirip dengan saat kita menggunakan <button type="button" onClick="window.location.reload()"> Reload Page </button> 7
Cara Menyegarkan/Memuat Ulang Halaman Secara Otomatis di JavaScript
Kami juga dapat mengizinkan penyegaran halaman setelah waktu yang ditentukan menggunakan metode <button type="button" onClick="window.location.reload()"> Reload Page </button> 8 seperti yang terlihat di bawah ini
setTimeout(() => { document.location.reload(); }, 3000);Menggunakan kode di atas halaman web kami akan dimuat ulang setiap 3 detik
Sejauh ini, kita telah melihat cara menggunakan metode muat ulang di file HTML kita saat kita melampirkannya ke acara tertentu, serta di file JavaScript kita
Cara Menyegarkan/Memuat Ulang Halaman Menggunakan Fungsi Riwayat di JavaScript
Fungsi History adalah metode lain untuk me-refresh halaman. Fungsi histori digunakan seperti biasa untuk menavigasi mundur atau maju dengan meneruskan nilai positif atau negatif
Misalnya, jika kita ingin kembali ke masa lalu, kita akan menggunakan
history.go(-1);Ini akan memuat halaman dan membawa kita ke halaman sebelumnya yang kita navigasikan. Tetapi jika kita hanya ingin me-refresh halaman saat ini, kita dapat melakukannya dengan tidak memberikan parameter apa pun atau dengan mengirimkan <button type="button" onClick="window.location.reload()"> Reload Page </button> 9 (nilai netral)
history.go(); history.go(0);Catatan. Ini juga bekerja dengan cara yang sama seperti kita menambahkan metode reload() ke metode <button type="button" onClick="window.location.reload()"> Reload Page </button> 8 dan event click di HTML
Membungkus
Pada artikel ini, kami belajar cara me-refresh halaman menggunakan JavaScript. Kami juga mengklarifikasi kesalahpahaman umum yang menyebabkan orang meneruskan parameter boolean ke metode reload()
Terima kasih sudah membaca
IKLAN
IKLAN
IKLAN
Pengembang Frontend & Penulis Teknis
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai