Current Location: Home> Latest Articles> How to Use Ajax to Fetch Data from PHP and Dynamically Update the Page

How to Use Ajax to Fetch Data from PHP and Dynamically Update the Page

M66 2025-07-13

How to Use Ajax to Fetch Data from PHP and Dynamically Update the Page

Using Ajax to fetch variables from PHP methods is a very common requirement in web development. With Ajax, you can retrieve necessary data from the server without refreshing the page. In this article, we will explain how to use Ajax to fetch variables from PHP methods and provide concrete code examples.

Backend PHP Code Example

First, we need to write a PHP file to handle the Ajax request and return the required variables. Below is a sample PHP file (getData.php):

<?php
// Get the parameter passed from the front-end
$param = $_POST['param'];

// Perform some operations, such as fetching data from a database
$result = fetchDataFromDatabase($param);

// Return the result
echo json_encode($result);

// Function to fetch data from the database
function fetchDataFromDatabase($param) {
    // Connect to the database
    $conn = new mysqli('localhost', 'username', 'password', 'database');

    // Execute query
    $query = "SELECT * FROM table WHERE column = '$param'";
    $result = $conn->query($query);

    // Process the query result
    $data = array();
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }

    // Close the database connection
    $conn->close();

    return $data;
}
?>

Frontend JavaScript Code Example

Next, we need to write JavaScript code on the frontend to send the Ajax request and retrieve the variable from the PHP method. Below is a simple example:

// Create an XMLHttpRequest object
var xhr = new XMLHttpRequest();

// Set the Ajax request method, URL, and whether it is asynchronous
xhr.open('POST', 'getData.php', true);

// Set request header
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// Listen for state changes of the Ajax request
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // Get the data returned by PHP
        var data = JSON.parse(xhr.responseText);

        // Process the data
        processData(data);
    }
};

// Send the Ajax request
xhr.send('param=value');

Code Explanation

In the above code, we first create an XMLHttpRequest object and set the request method, URL, and whether it is asynchronous. Then, we listen for the state changes of the request, process the returned data when the request is complete, and ensure that the parameter is passed when sending the Ajax request via xhr.send().

Conclusion

With the code examples above, developers can easily implement the functionality of fetching variables from PHP methods using Ajax. The frontend sends an Ajax request to the backend PHP file, the backend PHP file performs the operation and returns data, and the frontend processes the returned data, enabling dynamic data retrieval without refreshing the page.

Related