Home >Backend Development >PHP Tutorial >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
<code class="javascript">function recp(id) { $('#myStyle').load('data.php?id=' + id); }</code>
<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>
<code class="html"><a href="#" onClick="recp('1')" > One </a> <a href="#" onClick="recp('2')" > Two </a> <a href="#" onClick="recp('3')" > Three </a> <div id='myStyle'> </div></code>
How it Works
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!