如何將 $_GET 變數從連結傳遞到 Bootstrap 模態？

將$_GET 變數從連結傳遞到Bootstrap 模態

在Bootstrap 模態上下文中，成功從連結傳遞需要$_GET 變數需要$_GET 變數需要$_GET 變數。謹慎的做法。本文介紹了完成此任務的各種方法，每種方法都有自己的優點和注意事項。

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

在模態HTML中，根據GET參數傳遞的ID從資料庫中取得記錄，並顯示它們

使用Ajax 和 Bootstrap 模態事件監聽器的替代解決方案：

此解決方案使用 Bootstrap 模態事件監聽器將 ID 傳遞給模態，而不使用單獨的 PHP 檔案。在模態呼叫按鈕的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>

在模態的JavaScript 事件處理程序中，使用ID 透過Ajax 取得資料並顯示它在模式中。

使用 Ajax 和 jQuery Click 的替代解決方案功能：

此解決方案利用 jQuery 的點選功能來啟動 Ajax 呼叫以取得並顯示必要的資料。在模態呼叫按鈕的 HTML 中，修改錨標記如下：

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

在單獨的 JavaScript 檔案中，編寫以下 Ajax 程式碼來取得並顯示資料：

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

將頁面資訊傳遞到模態：

在需要最少頁面資訊的情況下要在模態中顯示，您可以在不使用 Ajax 的情況下實現此目的。在模態呼叫按鈕的 HTML 中，使用資料屬性來傳遞值：

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

在相關的模態事件處理程序中，如下存取傳遞的值：

$('#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 模態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！