Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Bagaimana untuk Melepasi Pembolehubah $_GET daripada Pautan ke Modal Bootstrap?

Bagaimana untuk Melepasi Pembolehubah $_GET daripada Pautan ke Modal Bootstrap?

Patricia Arquette
Patricia Arquetteasal
2024-11-17 22:48:02976semak imbas

How to Pass $_GET Variables from a Link to a Bootstrap Modal?

Melalui Pembolehubah $_GET daripada Pautan ke Modal Bootstrap

Dalam konteks modal Bootstrap, berjaya menghantar pembolehubah $_GET daripada pautan memerlukan pendekatan yang berhati-hati. Artikel ini membentangkan pelbagai kaedah untuk menyelesaikan tugas ini, masing-masing mempunyai kelebihan dan pertimbangan tersendiri.

Penyelesaian Mudah dengan Fail PHP:

Penyelesaian ini melibatkan mencipta coretan dalam anda Kod HTML:

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" href="file.php?id=<?php echo $obj->id; ?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Dalam HTML modal, ambil rekod daripada pangkalan data berdasarkan ID yang diluluskan melalui parameter GET dan paparkannya dalam mod.

Penyelesaian Gantian dengan Ajax dan Bootstrap Modal Event Listener:

Penyelesaian ini menggunakan Bootstrap modal event listener untuk menghantar ID kepada modal tanpa menggunakan fail PHP yang berasingan. Dalam HTML butang panggilan modal, gantikan atribut href dengan atribut data-id untuk menghantar ID baris:

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox" data-id="<?php echo $obj->id; ?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

Dalam pengendali acara JavaScript modal, ambil data melalui Ajax menggunakan ID dan paparkannya dalam modal.

Penyelesaian Gantian dengan Ajax dan Fungsi Klik jQuery:

Penyelesaian ini menggunakan fungsi klik jQuery untuk memulakan panggilan Ajax untuk mengambil dan memaparkan data yang diperlukan. Dalam HTML butang panggilan modal, ubah suai teg sauh seperti berikut:

<td><span data-placement="top" data-toggle="tooltip" title="Show"><a class="btn btn-primary btn-xs open-modal" href="">

Dalam fail JavaScript yang berasingan, tulis kod Ajax berikut untuk mengambil dan memaparkan data:

$(document).ready(function() {
  $('.open-modal').click(function() {
    var id = $(this).attr('id');
    $.ajax({
      type: 'post',
      url: 'file.php', // PHP file to fetch data
      data: 'post_id=' + id,
      success: function(data) {
        $('#editBox').show('show'); // Show modal
        $('.form-data').html(data); // Display fetched data
      }
    });
  });
});

Menyalurkan Maklumat Pada Halaman ke Modal:

Dalam kes di mana maklumat pada halaman minimum perlu dipaparkan dalam modal, anda boleh mencapainya tanpa menggunakan Ajax. Dalam HTML butang panggilan modal, gunakan atribut data untuk menghantar nilai:

<td data-placement="top" data-toggle="tooltip" title="Show">
  <a data-book-id="<?php echo $obj->id; ?>" data-name="<?php echo $obj->name; ?>" data-email="<?php echo $obj->email; ?>" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#editBox">
    <span class="glyphicon glyphicon-pencil"></span>
  </a>
</td>

Dalam pengendali acara modal yang berkaitan, akses nilai yang diluluskan seperti berikut:

$('#editBox').on('show.bs.modal', function(e) {
  var bookid = $(e.relatedTarget).data('book-id');
  var name = $(e.relatedTarget).data('name');
  var email = $(e.relatedTarget).data('email');
});

Atas ialah kandungan terperinci Bagaimana untuk Melepasi Pembolehubah $_GET daripada Pautan ke Modal Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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