如何将 $_GET 变量从链接传递到 Bootstrap 模式?

Linda Hamilton
发布: 2024-11-13 08:40:02
原创
971 人浏览过

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

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

在 Web 开发中,通常需要将数据从链接传递到模态窗口。要在 Bootstrap 中使用 $_GET 变量实现此目的,请按照以下步骤操作:

简单解决方案

  1. 模态调用按钮:

    <td>
    登录后复制
    登录后复制
  2. 模态 HTML:
    将以下模态 HTML 放置在呼叫按钮所在页面(最好位于底部)的 while 循环之外:

    <div class="modal fade">
    登录后复制
    登录后复制
  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>
    登录后复制

使用 Ajax 的替代解决方案

  1. 模态调用按钮(带有数据属性):

    <td>
    登录后复制
    登录后复制
  2. 模态 HTML:

    <div class="modal fade">
    登录后复制
    登录后复制
  3. JavaScript(使用 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
          }
        });
      });
    });
    登录后复制
  4. file.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
    }
    ?>
    登录后复制

附加说明

  • 要消除使用单独的脚本来清除模态数据的需要,您可以使用 $('#editBox').on('hidden. bs.modal', function () { $(this).removeData('bs.modal');
  • 另一种选择是使用 jQuery 的点击函数 $('.open-modal') .click(function(){ ... });,其中 open-modal 是添加到模态调用按钮的自定义类。
  • 您还可以使用数据属性将页面信息传递给模态,使用 Bootstrap 模态事件处理它。

通过使用这些技术,您可以有效地将 $_GET 变量从链接传递到 Bootstrap 模态,从而允许您在 Web 应用程序中显示动态内容。

以上是如何将 $_GET 变量从链接传递到 Bootstrap 模式?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板