How to Update Webpage Content Dynamically Using AJAX Without a Reload?

Change HTML Page Contents Dynamically Without Reloading

You desire to update the contents of a webpage dynamically, specifically a div, without triggering a page refresh. This can be achieved through AJAX (Asynchronous JavaScript and XML).

jQuery Approach

1. Define JavaScript Function:

   <code class="javascript">function recp(id) {
     $('#myStyle').load('data.php?id=' + id);
   }</code>

2. Add Event Handlers:
   Replace the onClick handlers in your HTML with the recp function:

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

3. Create PHP Script:
   Create a separate PHP file, such as data.php, that handles the data retrieval:

   <code class="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'];
   }</code>

4. Load Data Dynamically:
   When a link is clicked, the recp function uses AJAX to load the data from data.php into the div with the id 'myStyle':

   <code class="html"><div id="myStyle">
   </div></code>

Note: Ensure that the path to data.php in the jQuery load() function is correct and that the PHP file has appropriate permissions.

The above is the detailed content of How to Update Webpage Content Dynamically Using AJAX Without a Reload?. For more information, please follow other related articles on the PHP Chinese website!