Rumah > pembangunan bahagian belakang > tutorial php > Bagaimanakah saya boleh menghantar pembolehubah $_GET daripada pautan ke modal Bootstrap?

Bagaimanakah saya boleh menghantar pembolehubah $_GET daripada pautan ke modal Bootstrap?

Linda Hamilton
Lepaskan: 2024-11-13 08:40:02
asal
1032 orang telah melayarinya

How can I pass $_GET variables from a link to a Bootstrap modal?

Meluluskan Pembolehubah $_GET daripada Pautan ke Modal Bootstrap

Dalam pembangunan web, selalunya perlu menghantar data daripada pautan ke tetingkap modal. Untuk mencapai ini menggunakan pembolehubah $_GET dalam Bootstrap, ikuti langkah berikut:

Penyelesaian Mudah

  1. Butang Panggilan Modal:

    <td>
    Salin selepas log masuk
    Salin selepas log masuk
  2. Modal HTML:
    Letakkan HTML modal berikut di luar gelung while pada halaman di mana butang panggilan terletak (sebaik-baiknya di bahagian bawah):

    <div class="modal fade">
    Salin selepas log masuk
    Salin selepas log masuk
  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>
    Salin selepas log masuk

Penyelesaian Ganti dengan Ajax

  1. Butang Panggilan Modal (dengan atribut data):

    <td>
    Salin selepas log masuk
    Salin selepas log masuk
  2. Modal HTML:

    <div class="modal fade">
    Salin selepas log masuk
    Salin selepas log masuk
  3. JavaScript (dengan 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
          }
        });
      });
    });
    Salin selepas log masuk
  4. fail.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
    }
    ?>
    Salin selepas log masuk

Nota Tambahan

  • Untuk menghapuskan keperluan skrip berasingan untuk mengosongkan data daripada modal, anda boleh menggunakan $('#editBox').on('hidden. bs.modal', function () { $(this).removeData('bs.modal' });
  • Pilihan lain ialah menggunakan fungsi klik jQuery dengan $('.open-modal') .click(function(){ ... });, dengan open-modal ialah kelas tersuai yang ditambahkan pada butang panggilan modal.
  • Anda juga boleh menghantar maklumat pada halaman kepada modal menggunakan atribut data dan mengendalikannya menggunakan acara modal bootstrap.

Dengan menggunakan teknik ini, anda boleh menghantar pembolehubah $_GET dengan berkesan daripada pautan ke modal Bootstrap, membolehkan anda memaparkan kandungan dinamik dalam aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menghantar pembolehubah $_GET daripada pautan ke modal Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan