In PHP development, how can one implement Ajax to dynamically load data into tables based on user interactions like dropdown selections?

To dynamically load data into tables based on user interactions like dropdown selections in PHP, one can use Ajax to fetch data from the server without refreshing the page. By capturing the user's selection using JavaScript, an Ajax request can be sent to a PHP script that fetches the relevant data from a database and returns it to the frontend for display. 

// index.php

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Table</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#dropdown').change(function(){
                var selectedOption = $(this).val();
                $.ajax({
                    url: 'fetch_data.php',
                    method: 'POST',
                    data: {option: selectedOption},
                    success: function(response){
                        $('#table_data').html(response);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <select id="dropdown">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    <table id="table_data">
        <!-- Table data will be dynamically loaded here -->
    </table>
</body>
</html>
```

```php
// fetch_data.php

<?php
// Connect to database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$selectedOption = $_POST['option'];

// Fetch data based on selected option
$sql = "SELECT * FROM table WHERE column = $selectedOption";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>" . $row["column1"] . "</td><td>" . $row["column2"] . "</td></tr>";
    }
} else {
    echo "No data found";
}

$conn->close();
?>

Keywords

PHP Ajax dynamic loading tables dropdown selections

Related Questions