How to Modify Page Content Dynamically Using AJAX Without Refreshing?

Modifying Page Content Dynamically Without Refreshing

Problem:

You want to display data retrieved from a database in a div and update the content of the div when a link is clicked, without refreshing the page.

Solution:

To accomplish this, you can use AJAX (Asynchronous JavaScript and XML), which allows you to make asynchronous requests to a server without reloading the page. Here's how to implement it:

1. Create a JavaScript Function:

Add an onclick event handler to the links that triggers a JavaScript function. This function will use AJAX to make a request to a PHP script and retrieve updated data.

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

2. Add AJAX Request:

In the JavaScript function, use the jQuery $.load() method to send an AJAX request to the PHP script that contains the code to fetch the data.

3. Create a PHP Script:

Create a separate PHP file (e.g., data.php) that will handle the AJAX request. This script should:

1. Connect to the database.
2. Retrieve the data based on the id parameter passed in the request.
3. Return the retrieved data to the client.

<code class="php"><?php
// Connect to database
require ('myConnect.php');

// Get the ID parameter
$id = $_GET['id'];

// Fetch data from database
$results = mysql_query("SELECT para FROM content WHERE para_ID='$id'");

// Check if data exists
if( mysql_num_rows($results) > 0 ) {
  $row = mysql_fetch_array( $results );
  echo $row['para'];
}
?></code>

4. Update Div Content:

The response from the PHP script will be displayed in the div with the id 'myStyle'. The content of the div will be updated dynamically without reloading the page.

Additional Notes:

• You may need to adjust the AJAX request URL and database connection settings in the JavaScript and PHP scripts to match your specific environment.
• You can learn more about AJAX by consulting online resources or taking courses to improve your understanding of asynchronous programming.

The above is the detailed content of How to Modify Page Content Dynamically Using AJAX Without Refreshing?. For more information, please follow other related articles on the PHP Chinese website!