如何根据控制器返回的字符串显示HTML中对应的div标签？

Hey there! Let's figure out how to make those alert divs show up correctly based on the string your controller sends over. You've got hidden success, warning, and (I assume) danger alerts set up—here are two straightforward approaches depending on your setup:

Approach 1: Server-Side Rendering (Directly Control Display) #

If you're using a server-side framework (like PHP, ASP.NET, Spring Boot, etc.), you can have your controller pass the alert type to your template, then toggle the display property directly in the HTML. This works great for scenarios where you're rendering the page after a form submission or redirect.

Example with PHP (adjust syntax for your framework):

<?php
// Get the alert type from your controller (e.g., "success", "warning", "danger")
$alertStatus = $controllerProvidedStatus;
?>

<!-- Success Alert -->
<div class="alert alert-success alert-dismissible" role="alert" style="display: <?= $alertStatus === 'success' ? 'block' : 'none'; ?>;">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Success!</strong> Data inserted into OVERRIDE table.
</div>

<!-- Warning Alert -->
<div class="alert alert-warning alert-dismissible" role="alert" style="display: <?= $alertStatus === 'warning' ? 'block' : 'none'; ?>;">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Your custom warning message here.
</div>

<!-- Danger Alert (assuming you have this one too) -->
<div class="alert alert-danger alert-dismissible" role="alert" style="display: <?= $alertStatus === 'danger' ? 'block' : 'none'; ?>;">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Danger!</strong> Your error message here.
</div>

Approach 2: Frontend JavaScript (For Asynchronous Scenarios) #

If you need to fetch the alert type without reloading the page (like after an AJAX form submit), use JavaScript to toggle the alerts dynamically.

Using jQuery (if you're already using it): #

// Fetch the alert type from your controller endpoint
$.ajax({
  url: '/your-controller-api-endpoint',
  method: 'GET', // or POST depending on your setup
  success: function(response) {
    const alertType = response.alertType; // Assume your controller returns JSON with this field
    
    // Hide all alerts first
    $('.alert').hide();
    
    // Show the matching alert
    switch(alertType) {
      case 'success':
        $('.alert-success').show();
        break;
      case 'warning':
        $('.alert-warning').show();
        break;
      case 'danger':
        $('.alert-danger').show();
        break;
      default:
        // Handle unexpected values (optional)
        console.log('Unknown alert type:', alertType);
    }
  }
});

Using Vanilla JavaScript (no libraries): #

fetch('/your-controller-api-endpoint')
  .then(res => res.json())
  .then(data => {
    const alertType = data.alertType;
    
    // Hide all alerts
    document.querySelectorAll('.alert').forEach(alert => {
      alert.style.display = 'none';
    });
    
    // Show the target alert if it exists
    const targetAlert = document.querySelector(`.alert-${alertType}`);
    if (targetAlert) {
      targetAlert.style.display = 'block';
    }
  })
  .catch(err => console.error('Error fetching alert status:', err));

Quick Notes: #

• Make sure the string your controller returns exactly matches the suffix of your alert classes (e.g., "success" → "alert-success") to keep the code clean.
• For server-side rendering, some frameworks let you add/remove classes instead of manipulating inline styles—feel free to use that approach if it fits your stack (e.g., adding a d-block class instead of setting display:block).
• Always handle edge cases where the controller returns an unexpected value (like showing a default message or just hiding all alerts).

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