Bagaimana untuk menyegarkan div dengan jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyegarkan div dengan jquery

PHPz

Lepaskan： 2023-05-28 10:28:07

asal

2035 orang telah melayarinya

Dalam pembangunan bahagian hadapan, kami selalunya perlu mengemas kini kandungan halaman web secara dinamik, dan JQuery ialah perpustakaan JavaScript yang sangat popular yang menyediakan banyak fungsi alat untuk memudahkan kami mengemas kini elemen pada halaman tersebut. Antaranya, menyegarkan div adalah keperluan yang agak biasa Mari kita lihat cara JQuery menyegarkan div.

Pertama sekali, kita perlu menjelaskan apa itu refresh div. Umumnya, penyegaran div digunakan apabila kandungan kawasan div tertentu perlu dikemas kini selepas permintaan tak segerak mengembalikan data, tanpa memuat semula keseluruhan halaman. Kaedah menyegarkan hanya sebahagian daripada kandungan tanpa menyegarkan keseluruhan halaman boleh menjadikan aliran bahagian hadapan dengan lancar dan pengalaman pengguna lebih lancar.

Seterusnya, kita perlu memahami penggunaan asas JQuery. Perkara pertama yang perlu jelas ialah JQuery ialah perpustakaan JavaScript, jadi kami perlu memperkenalkan fail js JQuery. Secara umumnya, kami akan meletakkan kod berikut dalam pengepala fail HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

Salin selepas log masuk

Selepas memperkenalkan JQuery, mari lihat cara menggunakan JQuery untuk mengemas kini kandungan dalam div. Secara umumnya, mengemas kini kandungan div terbahagi kepada dua langkah: langkah pertama ialah mendapatkan elemen div yang perlu dikemas kini melalui JQuery, dan langkah kedua ialah mengemas kini kandungan div melalui API yang disediakan oleh JQuery .

Kaedah untuk mendapatkan elemen div adalah sangat mudah Anda hanya perlu menggunakan pemilih JQuery untuk mendapatkan elemen div yang perlu dikemas kini, contohnya:

var divElement = $('div#updateDiv');

Salin selepas log masuk

Di sini kami menggunakan div. elemen dengan pemilih id updateDiv untuk mendapatkannya dan menyerahkannya kepada pembolehubah divElement.

Seterusnya, kita perlu menggunakan API yang disediakan oleh JQuery untuk mengemas kini kandungan dalam div ini. JQuery menyediakan pelbagai kaedah API untuk mengemas kini kandungan elemen Kaedah yang biasa digunakan ialah html() dan text().

Kemas kini kandungan div melalui kaedah html()

Kaedah html() boleh menetapkan atau mengembalikan kandungan elemen yang dipilih Secara lebih khusus, ia boleh digunakan untuk memasukkan HTML kod ke dalam yang ditentukan di dalam elemen div.

Contohnya, kami menggunakan kod berikut untuk mendapatkan data dengan memanggil Ajax:

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $('div#updateDiv').html('任务名称：' + data.title + '<br>' + '任务状态：' + data.completed);
  }
});

Salin selepas log masuk

Di sini, kami mendapatkan data dengan memanggil Ajax, dan menyambung nilai tajuk dan atribut yang lengkap daripada data ke dalam nama tugas dan rentetan status tugas, dan kemudian panggil kaedah html() untuk mengemas kini rentetan ini ke dalam elemen div.

Kemas kini kandungan div melalui kaedah text()

Kaedah text() boleh menetapkan atau mengembalikan kandungan teks elemen yang dipilih, yang boleh digunakan untuk mengemas kini kandungan teks daripada elemen div yang ditentukan.

Sebagai contoh, kami menggunakan kod berikut untuk mendapatkan data dengan memanggil Ajax:

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $('div#updateDiv').text('任务名称：' + data.title + '，' + '任务状态：' + data.completed);
  }
});

Salin selepas log masuk

Di sini, kami juga mendapatkan data dengan memanggil Ajax, dan sambungkan nilai tajuk dan selesai atribut data ke dalam Rentetan nama tugas dan status tugas, dan kemudian memanggil kaedah text() untuk mengemas kini rentetan ini ke dalam elemen div.

Melalui kaedah di atas, kami boleh mengemas kini kandungan div pada bahagian hadapan dengan mudah. Tetapi perlu diingatkan bahawa kaedah kemas kini ini hanya terpakai apabila kandungan dalam div bukan struktur HTML yang kompleks. Jika kandungan yang dikemas kini lebih kompleks, kami boleh menggunakan rangka kerja bahagian hadapan seperti Vue.js untuk mencapai pengalaman pembangunan yang lebih baik.

Ringkasan:

JQuery ialah salah satu perpustakaan JavaScript yang biasa digunakan dalam pembangunan bahagian hadapan Dengan menggunakan API JQuery, anda boleh mengendalikan elemen halaman dengan mudah. Apabila melaksanakan penyegaran semula div, dengan terlebih dahulu mendapatkan elemen div yang perlu dikemas kini, dan kemudian menggunakan kaedah API yang disediakan oleh JQuery, seperti kaedah html() dan teks(), untuk mengemas kini kandungan dalam div, anda boleh memuat semula keseluruhan halaman tanpa menyegarkan keseluruhan halaman kesan kandungan.

Atas ialah kandungan terperinci Bagaimana untuk menyegarkan div dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!