Home >Backend Development >PHP Tutorial >How to Update Dynamic Content without Page Refresh Using AJAX?

How to Update Dynamic Content without Page Refresh Using AJAX?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-22 11:46:03961browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn