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 Show
Cara Mencegah Penyegaran Halaman pada Pengiriman FormulirKatakanlah 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 JavaScriptBerikut 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 jQueryAnda 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 onsubmitAnda 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 Kode ini dapat dipanggil secara otomatis pada suatu peristiwa atau hanya ketika pengguna mengklik tautan Contoh Kode Refresh JavaScriptBerlari Stack editor Unstack editor Pratinjau Editor Segarkan OtomatisAnda 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 LainnyaDengan menyertakan kode penyegaran dalam suatu fungsi, Anda dapat memiliki kontrol penuh saat halaman disegarkan Contoh 1Alih-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 2Anda 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 HTMLContoh 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 JavaScriptCara Menyegarkan Halaman di JavaScript Dengan location.reload()Anda dapat menggunakan metode JavaScript Metode 0Berikut ini adalah sintaks untuk memuat ulang halaman
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 1 membantu memuat ulang secara paksa untuk mem-bypass cache-nya. Tapi ini bukan masalahnyaMenurut Dokumentasi MDN, parameter boolean bukan bagian dari spesifikasi saat ini untuk Browser seperti Firefox, di sisi lain, mendukung penggunaan parameter boolean non-standar yang dikenal sebagai 4 untuk location.reload() , yang menginstruksikan Firefox untuk mem-bypass cache-nya dan memuat ulang dokumen saat ini secara paksaSelain dari Firefox, parameter apa pun yang Anda tentukan dalam panggilan Cara Melakukan Muat Ulang/Segarkan Halaman di JavaScript Saat Tombol DiklikSejauh 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 7Cara Menyegarkan/Memuat Ulang Halaman Secara Otomatis di JavaScriptKami juga dapat mengizinkan penyegaran halaman setelah waktu yang ditentukan menggunakan metode 8 seperti yang terlihat di bawah ini
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 JavaScriptFungsi 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
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 9 (nilai netral)
Catatan. Ini juga bekerja dengan cara yang sama seperti kita menambahkan metode 8 dan event click di HTMLMembungkusPada artikel ini, kami belajar cara me-refresh halaman menggunakan JavaScript. Kami juga mengklarifikasi kesalahpahaman umum yang menyebabkan orang meneruskan parameter boolean ke metode 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 Bagaimana cara menyegarkan bidang input dalam JavaScript?Segarkan nilai di bidang teks dengan JavaScript/jquery . masukkan nilai ke dalam bidang teks klik di suatu tempat di luar bidang teks klik kembali ke bidang teks Apa metode memuat ulang ()?reload() metode menyediakan cara untuk memuat ulang halaman di URL saat ini . Sintaksnya adalah sebagai berikut. obyek. memuat ulang(memuat ulang paksa); .
Bagaimana cara me-refresh tabel di JavaScript?trigger() dari skrip apa pun, atau komponen lain (seperti tombol ubahsuaian) atau opsi tombol segarkan dalam komponen tabel akan melakukan ini untuk Anda. |