Blog ini akan membahas pendekatan untuk memuat ulang div tanpa memuat ulang seluruh halaman dalam JavaScript.
Bagaimana cara memuat ulang div Tanpa Memuat Ulang Seluruh Halaman di jQuery?
The “ div ” dapat dimuat ulang tanpa memuat ulang seluruh halaman menggunakan metode “on()” jQuery yang dikombinasikan dengan “ memuat() ' metode.
Metode on() mengaitkan satu atau lebih event handler untuk elemen, dan metode load() memuat konten ke dalam elemen yang diambil. Metode-metode ini dapat digabungkan untuk mengakses div dan memuatnya kembali setelah peristiwa yang dipicu.
Contoh
Mari ikhtisar kode HTML berikut:
< tubuh >
< h2 > Ini adalah cara memuat ulang div tanpa memuat ulang seluruh halaman h2 >
< id div = 'myDiv' >
< p > JavaScript adalah bahasa pemrograman yang berisi fungsi , variabel , peristiwa dan objek dll. p >
div >
< tombol > memuat ulang tombol >
tubuh >
Di blok kode di atas:
- Sertakan heading yang tertera.
- Juga, tentukan elemen “” yang memiliki atribut “id”.
- Setelah itu, sertakan paragraf di dalam tag “
” dan tombol untuk memicu fungsionalitas yang diinginkan.
Sekarang, mari beralih ke kode JavaScript:
< skrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
naskah >
< naskah >
$ ( 'tombol' ) . pada ( 'klik' , fungsi ( ) {
$ ( '#myDiv' ) . memuat ( '#myDiv' )
peringatan ( 'Diisi ulang' )
} ) ;Dalam cuplikan kode ini
- Sertakan perpustakaan jQuery melalui “ src ” atribut.
- Akses tombol yang dibuat dan kaitkan “ pada() ' metode.
- Ini akan memanggil fungsi yang disebutkan pada klik tombol, seperti yang terlihat dari acara terlampir ' klik ”.
- Dalam definisi fungsi, akses “ ” elemen dan memuatnya lagi menggunakan “ memuat() ” metode dengan mengacu pada “ Indo ”.
- Akibatnya, div yang disertakan akan dimuat ulang setelah tombol diklik, dan pesan yang dinyatakan melalui kotak dialog peringatan akan ditampilkan.
Keluaran
Dapat diamati bahwa div berhasil dimuat ulang tanpa memuat ulang seluruh halaman.
Kesimpulan
Untuk memuat ulang div tanpa memuat ulang seluruh halaman, gunakan tombol “ pada() ” metode yang dikombinasikan dengan “ memuat() ' metode. Metode ini dapat digunakan untuk memuat ulang konten div pada peristiwa yang dipicu dengan mengaksesnya dan merujuknya lagi. Blog ini menjelaskan metode untuk memuat ulang div tanpa memuat ulang seluruh halaman.
- Setelah itu, sertakan paragraf di dalam tag “