Bagaimanakah Saya Boleh Mengemas kini Kandungan Div Secara Dinamik Menggunakan AJAX tanpa Muat Semula Halaman?

Mengemas kini Kandungan Halaman Secara Dinamik

Kod ini bertujuan untuk mengemas kini kandungan elemen div secara dinamik apabila mengklik pautan, tanpa memuatkan semula halaman.

Dijana PHP Halaman

<?php $id = '1';

function recp($rId) {
    $id = $rId;
}
?>

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

<div>
<p><strong>Versi Dipertingkatkan JavaScript</strong></p>
<pre class="brush:php;toolbar:false"><script type="text/javascript">
function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}
</script>

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

<div>
<p><strong>Skrip PHP untuk Pengambilan Data</strong></p>
<pre class="brush:php;toolbar:false"><?php require ('myConnect.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'];
}
?>

Dalam persediaan ini, mengklik mana-mana pautan mencetuskan fungsi JavaScript recp, yang menggunakan jQuery's Kaedah .load() untuk mendapatkan semula data daripada skrip data.php melalui AJAX. Data kemudiannya dimuatkan ke dalam div #myStyle, mengemas kini kandungannya secara dinamik tanpa memuat semula halaman.