如何将数据库数据展示到网站指定HTML div容器中？

Hey Bram, let's walk through how to get your stored database data into the .informatie-en-hallo-text div on your page. Below are two common, practical approaches based on typical web tech stacks:

Approach 1: Server-Side Rendering (e.g., with PHP & MySQL) #

If you're using a server-side language like PHP, you can inject the data directly into the HTML when the page loads. Here's a step-by-step example:

1. Connect to your database (using prepared statements to avoid SQL injection):

<?php
// Database connection details
$servername = "your_server";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

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

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

// Prepare and execute query
$stmt = $conn->prepare("SELECT your_content_column FROM your_table WHERE your_condition = ?");
$stmt->bind_param("s", $your_condition_value); // Adjust parameter type as needed
$stmt->execute();
$result = $stmt->get_result();

// Fetch the data
$content = "";
if ($row = $result->fetch_assoc()) {
  $content = htmlspecialchars($row['your_content_column']); // Sanitize output
}

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

2. Insert the data into your HTML div:

<div class="informatie-en-hallo">
  <div class="informatie-en-hallo-textblock">
    <img id="FrontpageBramF1" src="images/FrontpageFotoPF_transparant.png">
    <div class="informatie-en-hallo-text">
      <p><?php echo $content; ?></p>
    </div>
  </div>
</div>

Approach 2: Front-End Async Loading (Native JavaScript) #

If you want to load data after the page has loaded (e.g., for dynamic updates), use a JavaScript fetch request to a backend API endpoint:

1. Create a backend API endpoint (example with PHP, api/get-content.php):

<?php
// Same database connection code as above...

// Fetch data
$stmt = $conn->prepare("SELECT your_content_column FROM your_table WHERE your_condition = ?");
$stmt->bind_param("s", $your_condition_value);
$stmt->execute();
$result = $stmt->get_result();

$response = [];
if ($row = $result->fetch_assoc()) {
  $response['content'] = htmlspecialchars($row['your_content_column']);
}

// Return JSON
header('Content-Type: application/json');
echo json_encode($response);

// Cleanup
$stmt->close();
$conn->close();
?>

2. Add JavaScript to your front-end page to fetch and insert the data:

<div class="informatie-en-hallo">
  <div class="informatie-en-hallo-textblock">
    <img id="FrontpageBramF1" src="images/FrontpageFotoPF_transparant.png">
    <div class="informatie-en-hallo-text">
      <p id="dynamic-content">Loading...</p>
    </div>
  </div>
</div>

<script>
// Target the container
const contentContainer = document.querySelector('.informatie-en-hallo-text p');

// Fetch data from the API
fetch('api/get-content.php')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Update the div with fetched content
    contentContainer.textContent = data.content;
  })
  .catch(error => {
    // Handle errors gracefully
    contentContainer.textContent = 'Failed to load content.';
    console.error('Error:', error);
  });
</script>

Key Notes: #

• Always sanitize your output (using htmlspecialchars() in PHP or similar methods) to prevent XSS attacks.
• Use prepared statements for database queries to avoid SQL injection vulnerabilities.
• If you're using a framework like Vue.js or React, the approach would involve binding data to the component, but the core idea (fetching from DB → passing to front-end) remains similar.

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