如何将 $_GET 变量从链接传递到 Bootstrap 模态？

将 $_GET 变量从链接传递到 Bootstrap 模态

在 Bootstrap 模态上下文中，成功从链接传递 $_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 单击函数的替代解决方案：

此解决方案利用 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中文网其他相关文章！