How Can I Dynamically Update HTML Page Content Without Reloading the Page?

Change HTML Page Contents Dynamically

Updating web content without reloading the page can enhance user experience and improve website performance. To achieve this, you can utilize AJAX (Asynchronous JavaScript and XML) in conjunction with HTML, PHP, JavaScript, and jQuery.

Consider the following example:

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

<div>
<p>This code displays links to retrieve different content from a database. Instead of reloading the page when a link is clicked, you need to use AJAX to asynchronously fetch the data and update the content of the "myStyle" div without refreshing the page.</p>
<p>To achieve this, you can utilize the following JavaScript function:</p>
<pre class="brush:php;toolbar:false"><script type="text/javascript">
  function recp(id) {
    $('#myStyle').load('data.php?id=' + id);
  }
</script>

This function uses jQuery's load() method to fetch the content from a separate PHP script ("data.php") and replace the content of the "myStyle" div with the retrieved data.

The PHP script ("data.php") should contain the necessary code to retrieve and display the requested content:

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

By implementing this approach, you can dynamically update page contents without reloading the page, allowing users to seamlessly navigate your website while accessing different content on demand.