How Can I Update a Web Page\'s Content Without Refreshing Using JavaScript and AJAX?

Updating Page Contents Without Refreshing Using Javascript and AJAX

You can achieve the functionality of updating the contents of a div without refreshing the page using JavaScript and AJAX. Here's how you can do it:

Since the onclick handlers are executed in the browser, PHP functions cannot be directly invoked. Instead, add a JavaScript function that uses AJAX to fetch data from a PHP script. Using jQuery, you can employ the following code:

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

Create a separate PHP file (data.php in this example) and place your PHP code within it:

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

In the HTML, update your links to utilize the JavaScript function:

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

<div>

By clicking on these links, the content of the div (with id 'myStyle') will be updated without reloading the page. The jQuery function will dynamically load the data from the PHP script via AJAX, ensuring that the user sees the updated information without having to wait for a page refresh.

The above is the detailed content of How Can I Update a Web Page\'s Content Without Refreshing Using JavaScript and AJAX?. For more information, please follow other related articles on the PHP Chinese website!