Segarkan konten halaman web tanpa memuat ulang menggunakan JavaScript. Apakah ada cara untuk memperbarui satu elemen html yang diperbarui di semua dokumen? Contoh memperbarui konten halaman tanpa memuat ulang
Selamat tinggal. Kali ini sedikit lebih banyak tentang JavaScript. Ada kebutuhan untuk memperbarui konten blok dengan menekan sebuah tombol, tanpa memuat ulang halaman, agar tidak membuat pengguna menjadi gila. Berkat catatan kecil ini, Anda dapat mengingat selamanya bagaimana menerapkannya.
Anda tidak hanya dapat memperbarui, tetapi juga
Pertama-tama, kita memerlukan elemen blok. Biarlah, mari kita buat di halaman dan berikan pengenal unik yang dapat dikenali oleh jQuery.
Halo Dunia
Penting untuk dipahami bahwa pengidentifikasi itu harus unik di seluruh halaman, jadi dengan memanggil $('#block') kita dapatkan Pertama elemen pada halaman dengan id ini. Jika Anda perlu mengubah konten beberapa elemen, Anda harus menggunakan kelas.
Halo Dunia
|
Halo Dunia |
Halo Dunia
Biarkan sebagai tombol bertindak sebagai tautan biasa , dengan rintisan href=# . Dalam keadaan normal, stub akan mengembalikan pengguna ke bagian atas halaman web. Kami akan melampirkan acara onclick ke tautan, di mana kami akan memanggil fungsi js setNewEntry(), yang, misalnya, akan menerima konten baru untuk elemen blok kami.
Tombol 1
Tombol 2
Tombol 3
Hapus blok
kembali salah; setelah panggilan diperlukan untuk membatalkan transisi ke url dari href , dalam kasus kami, kami tidak akan kembali ke bagian atas halaman, tetapi akan tetap di tempatnya.
Sekarang mari kita lihat fungsinya sendiri di JS; kita akan mengubah isi blok menggunakan metode .html(). Jika kita menggunakannya tanpa argumen, ia akan mengembalikan konten blok saat ini kepada kita; jika kita memberikan satu argumen, misalnya string, maka ia akan mengganti konten blok dengan argumen tersebut. Dalam kasus yang mendekati kenyataan, metode ini meneruskan fungsi yang memproses blok dan mengembalikan konten baru ke dalamnya. Namun untuk saat ini kita akan membatasi diri pada passing string.
function setNewEntry(entry) ( //#block - temukan elemen berdasarkan pengenal //.block - temukan berdasarkan nama kelas $("#block").html(entry); )
Seperti inilah tampilan kode halaman web.
js .html demo
Halo Dunia
Tombol 1
Tombol 2
Tombol 3
Hapus blok
function setNewEntry(entry) ( //#block - temukan elemen berdasarkan pengenal //.block - temukan berdasarkan nama kelas $("#block").html(entry); ) Contoh meneruskan fungsi ke metode the.html()
Saya datang dengan fungsi yang sangat sederhana yang akan mengumpulkan riwayat klik tombol dan menghapusnya kapan pun kita mau. Cukup untuk demonstrasi.
fungsi setNewEntry(entri) ( $("#block").html(getNewEntry($("#block").html(), entri)); ) fungsi getNewEntry(oldHTML, newHTML) ( if(newHTML == "" ) kembalikan HTML baru; jika tidak, kembalikan HTML lama + HTML baru;
KesimpulanYah, itu saja, jika dilihat, tidak rumit, tetapi dengan bantuan metode ini Anda dapat mencapai "hal-hal hebat" dan membuat halaman web dinamis untuk setiap selera. Terima kasih atas perhatian Anda!
Katakanlah saya memiliki halaman index.html dengan menu navigasi, dan saya memiliki 15 halaman html lainnya dengan menu yang sama.
Apakah mungkin jika html/css/js memperbarui SATU file (misalnya file index.html) dan semua pembaruan diterapkan di 15 dokumen?
Saya tahu Anda bisa melakukan ini dengan PHP, tetapi halaman yang saya jalankan tidak menggunakan file indeks PHP, jadi saya mencari cara lain.
Mungkin ada cara lain untuk mencapai hal ini? Mungkin JS sudut? Adakah saran atau tautan yang Anda sarankan untuk membaca/mempelajari cara melakukan ini?
Coba ini:
dokumen.getElementById("sideBar").innerHTML="";
Bisakah Anda menggunakan JQuery? :D
Contoh Halaman 1:
$(dokumen).siap(fungsi() ( $("#sideBar").load("side_content.html"); ));
Ya - ini mungkin dan merupakan persyaratan untuk semua jenis ukuran situs yang tidak sepele.
Cara umum untuk melakukan hal seperti ini tanpa menjadi terlalu rumit adalah ini. Dalam file HTML Anda, Anda menyertakan beberapa templat. Templat ini mengontrol keseluruhan tampilan situs Anda. Semua file HTML Anda berisi template yang sama. Jika Anda menginginkan sesuatu yang berbeda pada halaman tertentu, Anda mengganti template Anda di file html spesifik tersebut.
Hasilnya, tampilannya seperti ini:
konten saya di sini.
Di style.css dan custom.js Anda, Anda dapat pergi ke pengaturan kota. Anda dapat menambahkan lebih banyak style sheet dan lebih banyak skrip javascript sesuai kebutuhan. Sebagian besar situs memiliki lebih banyak gaya dan javascript daripada konten.
Situs favorit saya untuk mempelajari teknologi ini adalah Mozilla Developer Network, namun masih banyak sumber bagus lainnya.
Sinkronisasi tab tersedia melalui localStorage dan StorageEvent. Anda dapat menemukan informasi lebih lanjut di MDN
Setelah memperbarui navigasi, Anda memanggil localStorage.setItem(someKey, someValue) dan dengan window.addEventListener("storage", this.handleStorageEvent) menangani perubahan localStorage di tab lain. Tab tempat acara diaktifkan tidak akan menyebarkan perubahan Penyimpanan lokal.
Semoga jawaban saya membantu: 3
Anda dapat melakukan ini dengan permintaan XML http... Anda hanya perlu mendefinisikan seluruh header navigasi, menu dalam satu file dan mengakses satu div di semua halaman...
function includeHTML() ( var z, i, elmnt, file, xhttp; /*mengulang kumpulan semua elemen HTML:*/ z = document.getElementsByTagName("*"); for (i = 0; i< z.length; i++) { elmnt = z[i]; /*search for elements with a certain atrribute:*/ file = elmnt.getAttribute("include-html"); if (file) { /*make an HTTP request using the attribute value as the file name:*/ xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} if (this.status == 404) {elmnt.innerHTML = "Page not found.";} /*remove the attribute, and call this function once more:*/ elmnt.removeAttribute("include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /*exit the function:*/ return; } } }; includeHTML();
AJAX dan jQuery. Pembaruan konten dinamis. Dasar-dasar (berubah mulai 01/03/2012)Artikel ini akan membahas tentang apa itu AJAX dan jQuery dan akan melihat contoh cara menggunakannya.
AJAX adalah alat untuk membangun aplikasi web yang berkomunikasi dengan server di latar belakang. Dalam hal ini, pengguna menerima aplikasi dengan pembaruan konten dinamis, tanpa memuat ulang seluruh halaman.
jQuery adalah kerangka kerja JavaScript, perpustakaan yang memungkinkan Anda menggunakan beberapa fitur Javascript dengan lebih nyaman, seperti membuat efek visual, penanganan acara, bekerja dengan dukungan DOM dan AJAX.
Anda dapat mengunduh jQuery versi terbaru dan mengenal semua fitur secara mendetail di situs web pengembang: http://www.jquery.com/
Pada artikel ini kita hanya akan melihat satu fungsi perpustakaan jQuery, yaitu fungsi $.ajax(). Fitur ini memungkinkan kami mengirimkan data ke server dan menerima respons dari server, semuanya di latar belakang, tanpa memuat ulang halaman. Pengaturan untuk menerima atau mengirimkan data bergantung pada parameter pemanggilan fungsi $.ajax(). Yang utama akan dibahas di bawah ini. Anda dapat membaca lebih lanjut tentang parameter di manual jQuery.
Mari kita lanjutkan untuk mempertimbangkan contoh.
Penting!
Agar contoh dapat berfungsi dengan benar, Anda harus:
1. Semua file harus ditulis dalam pengkodean UTF-8.
2. Skrip harus dijalankan di server web, dan tidak dijalankan di browser sebagai file.
Mari kita membuat program sederhana yang menampilkan waktu saat ini, diperbarui setiap detik menggunakan pengatur waktu. Fitur dari program ini adalah memperoleh informasi tentang waktu saat ini dari file eksternal lain.
Isi file index.html.
function show() ( $.ajax(( url: "time.php", cache: false, sukses: function(html)( $("#content").html(html); ) )); ) $(dokumen ).siap(fungsi())( tampilkan(); setInterval("tampilkan()",1000); ));
Kode ini memiliki beberapa fitur, mari kami jelaskan.
1. Pustaka jQuery disertakan dalam header file HTML; baris ini ditulis untuk tujuan ini.
File jquery.js sendiri terletak pada folder yang sama dengan file contoh.
2. Sebuah wadah dibuat di badan dokumen tempat kita akan memuat kontennya.
3. Fungsi $(document).ready(), yang sekilas aneh, diperlukan agar jQuery dapat bekerja dengan benar, dan di dalamnya kita dapat melakukan semua persiapan agar program dapat bekerja. Dalam kasus kita, kita memanggil fungsi show(), yang menentukan mekanisme untuk mengambil konten dari file lain, dan menyetel pengatur waktu agar fungsi show() dipanggil satu kali per detik.
$(dokumen).siap(fungsi())( show(); setInterval("show()",1000); ));
4. Fungsi show() terdiri dari pemanggilan fungsi $.ajax() dengan sejumlah parameter tertentu, yang memungkinkan kita memperoleh informasi dari file eksternal di server di latar belakang.
$.ajax(( url: "time.php", cache: false, sukses: function(html)( $("#content").html(html); ) ));
Mari kita lihat parameter yang digunakan oleh fungsi $.ajax().
Url: "time.php" Mengakses file time.php untuk mengambil konten. cache: false Hasil kueri tidak di-cache. sukses: function(html)( $("#content").html(html); ) Jika permintaan berhasil, kontrol diteruskan ke fungsi, yang menerima konten sebagai parameter dan menulis kontainernya. Penulisan ke wadah terjadi pada baris ini:
$("#konten").html(html);
Isi file time.php.
Tujuan dari file time.php adalah untuk menampilkan waktu saat ini di layar.
Unduh contoh file sumber (16,6 kb):
Sebuah program yang memuat konten secara dinamis sesuai kebijaksanaan pengguna.
Isi file index.html.
Halaman mana yang ingin Anda buka?
$(dokumen).siap(fungsi())( $("#btn1").klik(fungsi())( $.ajax(( url: "halaman1.html", cache: salah, sukses: fungsi(html) ( $ ("#content").html(html); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", cache: salah, sukses : fungsi(html)( $("#konten").html(html); ) ));Di badan dokumen, formulir telah dibuat yang memiliki dua tombol di mana pengguna memilih konten yang diinginkan. Dan wadah untuk memuat konten.
Peristiwa klik pada tombol "Halaman 1" ditangani oleh fungsi $("#btn1").click(), dan peristiwa klik pada tombol "Halaman 2" diproses oleh $("#btn2"). klik() fungsi.
Konten file page1.html dan page2.html, yang dimuat secara dinamis ke dalam area konten, adalah halaman HTML sederhana atau file teks yang berisi konten.
Unduh contoh file sumber (18,4 kb):
Mari kita lihat contoh yang mengirimkan nama pengguna yang dimasukkan ke server. Ketika server menerima nama, server mengeluarkan salam dan menghitung jumlah karakter dalam nama yang dimasukkan.
Isi file index.html.
Masukkan nama Anda:
$(dokumen).siap(fungsi())( $("#myForm").kirim(fungsi())( $.ajax(( ketik: "POST", url: "salam.php", data: "nama pengguna =" +$("#namapengguna").val(), sukses: fungsi(html)( $("#content").html(html); ) ));
Formulir untuk memasukkan nama pengguna telah dibuat di badan dokumen. Dan wadah untuk memuat konten dinamis.
Perhatikan bahwa formulir itu sendiri tidak memiliki bidang tindakan dan metode seperti biasanya. Fungsi $("#myForm").submit() berfungsi sebagai pengendali jika terjadi klik pada tombol "Kirim". Mari kita lihat fungsi ini.
$("#myForm").submit(function())( $.ajax(( ketik: "POST", url: "greetings.php", data: "username="+$("#username").val ( ), sukses: function(html)( $("#content").html(html); ) )); return false;
Seperti yang bisa kita lihat, pekerjaan utama sekali lagi terkait dengan fungsi $.ajax(). Kali ini muncul parameter tambahan yang tidak diperhatikan pada contoh 1 dan 2. Yaitu:
Jenis: Jenis transfer data "POST". data: "username="+$("#username").val() Parameter diteruskan ke server. Dalam hal ini, kami meneruskan isi bidang nama pengguna - nama pengguna. Secara umum parameter ditulis dengan cara yang sama seperti pada metode GET, dalam satu baris, misalnya:
data: "nama pengguna=Vasya&usia=18&jenis kelamin=laki-laki"
Harap dicatat bahwa pada akhirnya ada baris:
Kembalikan salah; Hal ini dilakukan agar formulir tidak mencoba mentransfer data ke file tempat formulir diluncurkan dan halaman tidak dimuat ulang.
Isi file salam.php.
Kami menampilkan salam dan menghitung jumlah karakter dalam nama.
Unduh contoh file sumber (16,8 kb):
Kesimpulannya, selain keuntungan nyata membuat halaman menggunakan konten pembaruan dinamis, ada sejumlah kelemahan yang harus dipertimbangkan saat mengembangkan situs, yaitu:
1. Pada halaman dengan pembaruan konten dinamis, tombol "Kembali" di browser tidak berfungsi dengan benar.
2. Halaman dengan pembaruan konten dinamis tidak mengubah URL berdasarkan kontennya, sehingga tidak dapat di-bookmark.
3. Halaman dengan pembaruan konten dinamis tidak diindeks oleh mesin pencari karena mereka tidak menjalankan perintah JavaScript.
Anda dapat menghilangkan kelemahan di atas secara terprogram. Artikel ini tidak membahas metode tersebut.
Mencari
Berlangganan
