如何使用Ajax将下拉菜单与HTML表格关联并实现数据联动？

Hey there! Let's get this working step by step. You've got a solid start with the jQuery change event, so let's fill in the gaps and add all the pieces you need to make this work smoothly.

First, set up your HTML structure #

You'll need the dropdown menu and a dedicated container where the course details table will render once data is fetched:

<!-- Dropdown menu for course selection -->
<select id="courses">
  <option value="">Select a course</option>
  <option value="1">Introduction to HTML</option>
  <option value="2">JavaScript Fundamentals</option>
  <!-- Add your other course options here -->
</select>

<!-- Container to hold the dynamically loaded table -->
<div id="course-details-container"></div>

Next, complete the jQuery/Ajax code #

Here's the full working code with comments explaining each part—perfect for someone new to Ajax:

$(document).ready(function() {
  // Listen for changes on the dropdown menu
  $("#courses").change(function(){
    var courseId = $(this).val();
    
    // Only run the Ajax request if a valid course is selected
    if(courseId) {
      $.ajax({
        url: 'fetch-course-details.php', // Replace with your actual PHP file path
        type: 'POST', // Use POST for secure data transfer
        data: { course_id: courseId }, // Send the selected course ID to the backend
        success: function(response) {
          // Insert the returned table HTML into our container
          $("#course-details-container").html(response);
        },
        error: function(xhr, status, error) {
          // Handle errors (super helpful for debugging!)
          $("#course-details-container").html('<p>Oops, something went wrong: ' + error + '</p>');
        }
      });
    } else {
      // Clear the container if the user selects the empty option
      $("#course-details-container").html('');
    }
  });
});

Now, build the PHP backend (fetch-course-details.php) #

This file connects to your database, fetches the matching course details, and returns an HTML table. Replace the database credentials with your own, and note the use of prepared statements to keep your database safe:

<?php
// Database connection settings (update these to match your setup)
$servername = "your_db_server";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_db_name";

// Create database connection
$conn = new mysqli($servername, $username, $password, $dbname);

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

// Get the course ID sent from the Ajax request
$courseId = $_POST['course_id'];

// Use prepared statements to prevent SQL injection (critical security step!)
$stmt = $conn->prepare("SELECT * FROM courses WHERE id = ?");
$stmt->bind_param("i", $courseId); // "i" indicates the parameter is an integer
$stmt->execute();
$result = $stmt->get_result();

// Build and return the HTML table if a course is found
if ($result->num_rows > 0) {
  $course = $result->fetch_assoc();
  echo '<table border="1" cellpadding="8" cellspacing="0">
          <tr>
            <th>Course Name</th>
            <th>Instructor</th>
            <th>Duration</th>
            <th>Description</th>
          </tr>
          <tr>
            <td>' . htmlspecialchars($course['name']) . '</td>
            <td>' . htmlspecialchars($course['instructor']) . '</td>
            <td>' . htmlspecialchars($course['duration']) . '</td>
            <td>' . htmlspecialchars($course['description']) . '</td>
          </tr>
        </table>';
} else {
  echo '<p>No details found for this course.</p>';
}

// Clean up connections
$stmt->close();
$conn->close();
?>

Key things to keep in mind: #

• SQL Injection Protection: Prepared statements prevent malicious users from manipulating your database queries—never skip this step.
• Error Handling: The Ajax error callback helps you debug issues like broken PHP files or database connection problems.
• HTML Sanitization: htmlspecialchars() ensures any user-generated content from the database doesn't trigger XSS attacks.
• Empty Selection Handling: Clearing the container when no course is selected keeps your UI clean and intuitive.

内容的提问来源于stack exchange，提问作者DevJ