Comment mettre à jour le contenu dynamique sans actualisation de page à l'aide d'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) &gt; 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!