Bagaimana untuk memuat semula data dalam jquery

Dengan pembangunan aplikasi rangkaian, paparan data merupakan bahagian yang sangat penting dalam pembangunan bahagian hadapan. Dalam proses paparan data, kita selalunya perlu memuat semula halaman atau menyegarkan sebahagian daripada data untuk memastikan ia dikemas kini. JQuery ialah perpustakaan Javascript yang sangat popular yang menyediakan banyak kaedah mudah untuk menangani isu bahagian hadapan. Jadi, bagaimana untuk menyegarkan data dalam JQuery?

JQuery menyediakan beberapa API untuk memuat semula data dan kami boleh melaksanakan mekanisme muat semula yang berbeza melalui API ini.

1. Gunakan Location.reload() untuk memuat semula keseluruhan halaman

Objek Lokasi mewakili URL halaman semasa. Melalui objek ini, kita boleh mendapatkan URL, cincangan, protokol, nama hos dan maklumat lain halaman. reload() ialah kaedah objek Lokasi, yang boleh memuatkan semula halaman semasa.

Jadi, jika kami perlu memuat semula keseluruhan halaman, kami boleh memanggil kaedah ini terus:

$(document).ready(function(){
    $("#refresh_button").click(function(){
        location.reload();//通过location对象的reload方法来刷新页面
    });
});

Penjelasan kod:

Pertama, selepas DOM dimuatkan, kami mulakan satu klik Acara ini berada pada butang dengan id "refresh_button". Apabila pengguna mengklik butang, kaedah muat semula() objek lokasi akan dipanggil, yang akan memuatkan semula halaman semasa.

2. Gunakan Ajax untuk memuat semula sebahagian daripada data

Jika kita hanya perlu memuat semula sebahagian daripada data dalam halaman, bukannya keseluruhan halaman, maka kita boleh menggunakan teknologi Ajax dalam JQuery.

Nama penuh Ajax ialah "JavaScript dan XML Asynchronous", iaitu teknologi yang digunakan untuk mencipta halaman web dinamik pantas. Melalui Ajax, kami boleh menghantar permintaan kepada pelayan, mendapatkan data, dan mengemas kini sebahagian daripada halaman tanpa memuat semula halaman.

Dalam JQuery, Ajax dilaksanakan melalui kaedah $.ajax(). Kaedah ini menerima objek sebagai parameter, yang mentakrifkan jenis permintaan, URL permintaan, parameter permintaan, respons permintaan dan maklumat lain. Di sini kita hanya perlu memberi perhatian kepada atribut data dan atribut kejayaan. Atribut data

menentukan parameter permintaan untuk dihantar ke pelayan, dan atribut kejayaan menentukan fungsi panggil balik untuk dilaksanakan apabila permintaan itu berjaya.

Dengan ini, kita boleh terlebih dahulu menambah elemen yang memaparkan data pada halaman, seperti teg div. Kemudian, apabila pengguna mengklik butang muat semula, kami menghantar permintaan kepada pelayan melalui ajax, mendapatkan data dan memasukkan data ke dalam tag div untuk mencapai kesan menyegarkan data.

Kod teras adalah seperti berikut:

$(document).ready(function(){
    //初始化页面
    function load_data(){
        $.ajax({
            url:"data.php",
            type:"POST",
            success:function(data){
                $("#data_container").html(data);//将获取到的数据插入到id为"data_container"的div标签中
            }
        });
    }
    //第一次加载数据
    load_data();
    //点击刷新按钮时，重新加载数据
    $("#refresh_button").click(function(){
        load_data();
    });
});

Penjelasan kod:

Pertama, kami mentakrifkan fungsi load_data, di mana permintaan dihantar ke pelayan melalui $.ajax (), Dapatkan data dan masukkan data ke dalam teg div dengan id "data_container". Dengan memanggil fungsi ini, kami boleh memuatkan data apabila halaman dimulakan, atau memuat semula data apabila pengguna mengklik butang muat semula.

Apabila halaman dimulakan, kami memanggil kaedah load_data() untuk mendapatkan data dan memasukkan data ke dalam teg div. Apabila pengguna mengklik butang muat semula, kami memanggil kaedah load_data() sekali lagi untuk memuat semula data.

Ringkasan:

JQuery ialah perpustakaan pembangunan bahagian hadapan yang sangat berkuasa dan popular, yang menyediakan banyak kaedah mudah untuk menangani masalah bahagian hadapan. Menyegarkan data ialah fungsi penting dalam pembangunan bahagian hadapan, dan dalam JQuery, kami boleh mencapai penyegaran data melalui Location.reload() dan teknologi Ajax. Sama ada ia menyegarkan keseluruhan halaman atau menyegarkan sebahagian data, ia boleh dicapai dengan mudah melalui kaedah ini.

Atas ialah kandungan terperinci Bagaimana untuk memuat semula data dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!