Wie kann ich $_GET-Variablen von einem Link an ein Bootstrap-Modal übergeben?

Übergabe von $_GET-Variablen von einem Link an ein Bootstrap-Modal

In der Webentwicklung ist es oft notwendig, Daten von einem Link an ein modales Fenster zu übergeben. Um dies mithilfe von $_GET-Variablen in Bootstrap zu erreichen, befolgen Sie diese Schritte:

Einfache Lösung

1. Modal Call Button:

   <td>

2. Modaler HTML-Code:
   Platzieren Sie den folgenden modalen HTML-Code außerhalb der while-Schleife auf der Seite, auf der sich die Anrufschaltfläche befindet (vorzugsweise unten):

   <div class="modal fade">

3. file.php:

   <?php
   // Include database connection here
   
   $Id = $_GET["id"]; // Escape the string if you like
   
   // Run the query
   ?>
   
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h4 class="modal-title"><center>Heading</center></h4>
   </div>
   
   <div class="modal-body">
     // Show records fetched from database against $Id
   </div>
   
   <div class="modal-footer">
     <button type="button" class="btn btn-default">Submit</button>
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>

Alternative Lösung mit Ajax

1. Modal Call Button (mit Datenattribut):

   <td>

2. Modal HTML:

   <div class="modal fade">

3. JavaScript (mit jQuery):

   // jQuery library comes first
   // Bootstrap library
   $(document).ready(function() {
     $('#editBox').on('show.bs.modal', function(e) {
       var id = $(e.relatedTarget).data('id'); // Fetch id from modal trigger button
   
       $.ajax({
         type: 'post',
         url: 'file.php', // Here you will fetch records
         data: 'post_id=' + id, // Pass $id
         success: function(data) {
           $('.form-data').html(data); // Show fetched data from database
         }
       });
     });
   });

4. file.php:

   <?php
   // Include database connection here
   
   if ($_POST['id']) {
     $id = $_POST['id'];
   
     // Run the query
     // Fetch records
     // Echo the data you want to show in the modal
   }
   ?>

Zusätzliche Hinweise

• Um die Notwendigkeit eines separaten Skripts zum Löschen von Daten aus dem Modal zu beseitigen, können Sie $('#editBox').on('hidden. bs.modal', function () { $(this).removeData('bs.modal'); });
• Eine andere Möglichkeit besteht darin, die Klickfunktion von jQuery mit $('.open-modal') zu verwenden. .click(function(){ ... });, wobei open-modal eine benutzerdefinierte Klasse ist, die der modalen Aufrufschaltfläche hinzugefügt wird.
• Sie können On-Page-Informationen auch mithilfe von Datenattributen und an das Modal übergeben Behandeln Sie es mithilfe des modalen Bootstrap-Ereignisses.

Durch die Verwendung dieser Techniken können Sie $_GET-Variablen effektiv von einem Link an ein Bootstrap-Modal übergeben, sodass Sie dynamische Inhalte in Ihren Webanwendungen anzeigen können.

Das obige ist der detaillierte Inhalt vonWie kann ich $_GET-Variablen von einem Link an ein Bootstrap-Modal übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!