How Can I Dynamically Update a Div\'s Content Using AJAX without Page Reloads?

Updating Page Contents Dynamically

This code aims to dynamically update the content of a div element upon clicking a link, without reloading the page.

The PHP-Generated Page

<?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>

The JavaScript-Enhanced Version

<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>

The PHP Script for Data Fetching

<?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'];
}
?>

In this setup, clicking any of the links triggers the recp JavaScript function, which uses jQuery's .load() method to retrieve the data from the data.php script via AJAX. The data is then loaded into the #myStyle div, dynamically updating its content without refreshing the page.

The above is the detailed content of How Can I Dynamically Update a Div\'s Content Using AJAX without Page Reloads?. For more information, please follow other related articles on the PHP Chinese website!