將 $_GET 變量從鏈接傳遞到 Bootstrap 模態(tài)

在 Bootstrap 模態(tài)上下文中，成功從鏈接傳遞 $_GET 變量需要謹(jǐn)慎的做法。本文介紹了完成此任務(wù)的各種方法，每種方法都有自己的優(yōu)點和注意事項。

使用 PHP 文件的簡單解決方案：

此解決方案涉及在您的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>

在模態(tài) HTML 中，根據(jù) GET 參數(shù)傳遞的 ID 從數(shù)據(jù)庫中獲取記錄，并在模態(tài)中顯示它們。

替代解決方案使用 Ajax 和 Bootstrap 模態(tài)事件監(jiān)聽器：

此解決方案使用 Bootstrap 模態(tài)事件監(jiān)聽器將 ID 傳遞給模態(tài)，而不使用單獨的 PHP 文件。在模態(tài)調(diào)用按鈕的 HTML 中，將 href 屬性替換為 data-id 屬性以傳遞行的 ID：

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

在模態(tài)的 JavaScript 事件處理程序中，使用 ID 通過 Ajax 獲取數(shù)據(jù)并顯示它

使用 Ajax 和 jQuery 單擊函數(shù)的替代解決方案：

此解決方案利用 jQuery 的單擊函數(shù)來啟動 Ajax 調(diào)用來獲取和顯示必要的數(shù)據(jù)。在模態(tài)調(diào)用按鈕的 HTML 中，修改錨標(biāo)記如下：

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

在單獨的 JavaScript 文件中，編寫以下 Ajax 代碼來獲取并顯示數(shù)據(jù)：

$(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
      }
    });
  });
});

將頁面信息傳遞到模態(tài)：

如果需要在模態(tài)中顯示最少的頁面信息，您可以在不使用 Ajax 的情況下實現(xiàn)此目的。在模態(tài)調(diào)用按鈕的 HTML 中，使用數(shù)據(jù)屬性來傳遞值：

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

在相關(guān)的模態(tài)事件處理程序中，按如下方式訪問傳遞的值：

$('#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');
});

以上是如何將 $_GET 變量從鏈接傳遞到 Bootstrap 模態(tài)？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！