How Can I Dynamically Update Web Page Content Without a Full Page Refresh?

Change Page Contents Dynamically Without Refreshing

Question:

How can a web page's content be updated without reloading the entire page?

Answer:

To update a page's content without the need for a full refresh, you can utilize AJAX (Asynchronous JavaScript and XML). This allows you to load data from a server without affecting the rest of the page.

Implementation:

1. Create a Javascript function using jQuery:

function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

This function uses jQuery's load() method to retrieve data from a PHP script and updates the content of the element with ID "myStyle".

2. Call the Javascript function:

<a href="#" onClick="recp('1')" > One   </a>
<a href="#" onClick="recp('2')" > Two   </a>
<a href="#" onClick="recp('3')" > Three </a>

Clicking on these links will trigger the recp() function and load the data from the corresponding ID.

3. Write a PHP script to handle the AJAX request:

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

This script retrieves the data from the database based on the ID and sends the result back to the client through AJAX.

The above is the detailed content of How Can I Dynamically Update Web Page Content Without a Full Page Refresh?. For more information, please follow other related articles on the PHP Chinese website!