Bagaimanakah Saya Boleh Mengemas kini Kandungan Div secara Dinamik dengan AJAX Tanpa Muat Semula Halaman?

HTML - Tukar Kandungan Halaman Secara Dinamik Tanpa Menyegarkan

Cabaran:

Anda mempunyai data yang diambil daripada pangkalan data dan dipaparkan dalam div. Apabila pautan diklik, anda ingin mengemas kini kandungan div tanpa memuat semula halaman.

Penyelesaian:

Memanfaatkan AJAX, anda boleh memintas penyegaran halaman dan mengemas kini div kandungan dengan lancar. Begini caranya:

Pihak Pelanggan (HTML dan JavaScript):

• Buat pautan dengan pengendali acara yang memanggil fungsi JavaScript.
• Dalam fungsi JavaScript tersebut, gunakan kaedah load() jQuery untuk menghantar permintaan kepada skrip PHP dengan parameter (cth., $('#myStyle').load('data.php?id=' id);).

Sisi Pelayan (PHP):

• Buat fail PHP berasingan yang mengendalikan permintaan AJAX.
• Ambil data daripada pangkalan data menggunakan parameter yang diterima daripada Permintaan AJAX.
• Kembalikan kandungan yang dikemas kini kepada penyemak imbas.

Contoh:

<a href="#" onClick="recp('1')" > One   </a>
<a href="#" onClick="recp('2')" > Two   </a>
<a href="#" onClick="recp('3')" > Three </a>

<div>

function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

// In data.php
$id = $_GET['id'];
$results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");   
if( mysql_num_rows($results) > 0 )
{
   $row = mysql_fetch_array( $results );
   echo $row['para'];
}

Oleh mengikut langkah ini, anda boleh mengemas kini kandungan div secara dinamik tanpa menyebabkan keseluruhan halaman dimuat semula, menjadikan tapak web anda lebih responsif dan mesra pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengemas kini Kandungan Div secara Dinamik dengan AJAX Tanpa Muat Semula Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!