How to Update Dynamic Content without Page Refresh Using AJAX?

Dynamic Content Updates with AJAX

Problem:

You aim to update the content of a div without reloading the page upon clicking a link.

Solution without Refreshing:

Employing AJAX (Asynchronous JavaScript and XML), you can retrieve updated content without reloading the page.

Implementation:

1. Handle Link Events with JavaScript:

   Assign JavaScript event handlers to links to invoke the data retrieval function.

   <code class="html"><a href="#" onClick="recp('1')" > One   </a></code>

2. AJAX Request with jQuery:

   The recp() function uses jQuery's .load() method to retrieve data from a PHP script without reloading the page.

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

3. Retrieve Data with PHP:

   Create a PHP script (e.g., data.php) that retrieves data based on the ID passed in the URL.

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

4. Render Updated Content:

   The retrieved data is loaded into the div with id='myStyle'.

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

With this implementation, clicking links updates the div's content dynamically, providing a seamless and responsive user experience without refreshing the page.

The above is the detailed content of How to Update Dynamic Content without Page Refresh Using AJAX?. For more information, please follow other related articles on the PHP Chinese website!