How to Update Webpage Contents Dynamically without Page Refresh Using AJAX?

Updating HTML Page Contents without Refreshing

To update the contents of a webpage dynamically without reloading it, AJAX (Asynchronous JavaScript and XML) is employed. This article explains how to achieve this using PHP, jQuery, and JavaScript.

Approach

Since onclick handlers execute client-side, directly calling PHP functions is not feasible. Instead, JavaScript functions utilizing AJAX are used to invoke PHP scripts and retrieve the desired data.

Implementation

1. Create jQuery Function:

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

2. Separate PHP Script (data.php):

<code class="php">&lt;?php
require ('myConnect.php');     
$id = $_GET['id'];
$results = mysql_query(&quot;SELECT para FROM content WHERE  para_ID='$id'&quot;);   
if( mysql_num_rows($results) &gt; 0 ) {
   $row = mysql_fetch_array( $results );
   echo $row['para'];
}
?&gt;</code>

3. HTML Integration:

<code class="html">&lt;a href=&quot;#&quot; onClick=&quot;recp('1')&quot; &gt; One   &lt;/a&gt;
&lt;a href=&quot;#&quot; onClick=&quot;recp('2')&quot; &gt; Two   &lt;/a&gt;
&lt;a href=&quot;#&quot; onClick=&quot;recp('3')&quot; &gt; Three &lt;/a&gt;

&lt;div id='myStyle'&gt;
&lt;/div&gt;</code>

How it Works

• When a link is clicked, the recp() function is invoked, which uses .load() to fetch the content of data.php with id as a parameter.
• data.php executes the necessary database query and returns the para value for the given id.
• jQuery updates the contents of the #myStyle element with the returned value, effectively updating the page without refreshing.

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