Bagaimana untuk melaksanakan fungsi menyegarkan halaman selepas mengubah suai nilai dalam jquery

Dalam pembangunan web, jQuery sering digunakan untuk berinteraksi dengan halaman hadapan. Dalam beberapa kes khas, adalah perlu untuk mengubah suai beberapa data dalam halaman melalui JavaScript, dan kemudian biarkan halaman dimuat semula untuk memaparkan kandungan yang diubah suai. Berikut ialah beberapa kaedah mudah yang boleh anda gunakan untuk mencapai fungsi ini.

1. Gunakan kaedah window.location.reload()

Ini adalah salah satu kaedah paling mudah: apabila anda perlu memuat semula halaman, cuma panggil window.location. Hanya muat semula () kaedah. Walau bagaimanapun, menggunakan kaedah ini akan memuatkan semula keseluruhan halaman, termasuk semua skrip dan sumber luaran, yang akan menyebabkan penggunaan prestasi yang hebat.

2. Menggunakan kaedah jQuery.ajax()

Anda boleh menggunakan kaedah jQuery.ajax() untuk mendapatkan kandungan tertentu daripada halaman dan kemudian muat semula kandungan tersebut. Contohnya:

$(dokumen).sedia(fungsi() {
$('#submit-borang').on('klik', fungsi(acara) {

// 防止表单默认提交
event.preventDefault();

// 获取表单中的数据
var formData = $('#form').serialize();

// 发送 jQuery Ajax 请求
$.ajax({
  url: '/update',
  type: 'POST',
  data: formData,
  success: function(data) {
    // 重新加载内容
    $('#result').html(data);
  }
});

});
});

Apabila pengguna mengklik elemen "serahkan borang", ia menghalang borang daripada diserahkan secara lalai dan menggunakan kaedah jQuery Ajax untuk mendapatkan data borang dan hantar ke alamat "/update" pelayan.

Setelah data berjaya dikemas kini, kod dalam fungsi kejayaan jQuery akan memuatkan semula elemen data pada halaman.

3. Menggunakan JavaScript localStorage

Cara lain ialah menggunakan JavaScript localStorage. Anda boleh menyimpan data yang anda ingin muatkan semula dalam localStorage dan apabila halaman dimuatkan semak sama ada localStorage mengandungi data. Jika ya, muat semula data.

Berikut ialah langkah pelaksanaan:

// Simpan data ke localStorage
localStorage.setItem('myData', JSON.stringify(someData));

/ / Semak sama ada terdapat data dan muat semula
window.onload = function() {
var myData = localStorage.getItem('myData');
if (myData) {

// 重新加载数据
$('#data-container').html(JSON.parse(myData));

}
}

Apabila halaman dimuatkan, kami menyemak localStorage untuk melihat sama ada terdapat sebarang data yang disimpan. Jika ya, muat semula data.

Ringkasan

Mudah untuk memuat semula dan memaparkan data yang diubah suai dalam halaman menggunakan salah satu kaedah di atas. Anda boleh memilih kaedah yang sesuai dengan keperluan permohonan anda. Jika anda hanya perlu memuatkan semula keseluruhan halaman, gunakan window.location.reload. Jika anda perlu memuatkan sebahagian daripada halaman kemudian gunakan jQuery.ajax() atau localStorage.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi menyegarkan halaman selepas mengubah suai nilai dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!