如何将 $_GET 变量从链接传递到引导模式？答案

【问题标题】：How to pass $_GET variables from a link to a bootstrapmodal?如何将 $_GET 变量从链接传递到引导模式？
【发布时间】：2015-12-02 17:16:49
【问题描述】：

来自我的 HTML 代码的片段。

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

点击链接时打开的模块：

<!-- Modal -->
    <div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <?php var_dump($_GET)?>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

有没有合适的方法将我的 id 传递给模态？

【问题讨论】：

用你的方法它不起作用，但需要更多信息，while循环里面的模态调用按钮吗？
Modual 在循环外，但 id 是从 while 传递过来的。
并且您正在尝试根据 id 从数据库中获取模块中的数据？
当我点击链接时，我有唯一的 id，我想传递到模块中。
我知道您想将 id 传递给模块，但我要问的是下一步如果将 id 传递给模块，您将如何处理，您希望在传递的模块中显示什么身份证？

标签： php twitter-bootstrap bootstrap-modal

【解决方案1】：

传递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" href="file.php?id=<?php echo $obj->id;?>"><span class="glyphicon glyphicon-pencil"></span></a></span></td>

模态 HTML

将下面的模态HTML放在上述调用按钮所在页面的while loop之外（最好在页面底部）

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          //Content Will show Here
        </div>
    </div>
</div>

现在创建一个 PHP 文件并将其命名为 file.php

使用模态调用按钮href="file.php?id=<?php echo $obj->id;?>"调用此文件

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

要删除模态内部的数据，或者换句话说，在不刷新页面的情况下打开下一条记录时刷新模态，请使用以下脚本

放在 jQuery 和 Bootstrap 库之后（记住 jQuery 和 Bootstrap 库总是排在第一位）

<script>
$( document ).ready(function() {
    $('#editBox').on('hidden.bs.modal', function () {
          $(this).removeData('bs.modal');
    });
});
</script>

使用 Ajax 和引导模式事件侦听器的替代解决方案

在模态调用按钮中，将href="file.php?id=<?php echo $obj->id;?> 替换为数据属性data-id="<?php echo $obj->id;?>"，因此我们使用bootstrap modal event 将行的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>

模态 HTML

将下面的模态HTML放在上述呼叫按钮所在页面的while loop之外（最好在页面底部）

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <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">
                <div class="form-data"></div> //Here Will show the Data
            </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>
        </div>
    </div>
</div>

现在在同一页面中添加以下脚本；

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() {       
    $('#myModal').on('show.bs.modal', function (e) { //Modal Event
        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
       }
    });
    });
});
</script>

现在创建一个 PHP 文件并将其命名为 file.php（与在 Ajax 方法中使用相同）

<?php
//Include database connection here
if($_POST['id']) {
    $id = $_POST['id'];
    // Run the Query
    // Fetch Records
    // Echo the data you want to show in modal
 }
?>

在这个解决方案中，您不需要以下脚本来删除模态内部的数据，或者换句话说就是刷新模态

$('#editBox').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
});

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

模态调用按钮

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

将下面的模态HTML放在上面的模态调用按钮所在的页面中（最好在页面底部）

<div class="modal fade" id="editBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="form-data"></div> //Here Will show the Data
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

在模态 HTML 和模态调用按钮所在的同一页面中遵循 Ajax 方法代码。

<script>
//jQuery Library Comes First
//Bootstrap Library
$( document ).ready(function() { 
  $('.open-modal').click(function(){
    var id = $(this).attr('id');
    $.ajax({
      type : 'post',
       url : 'file.php', //Here you should run query to fetch records
      data : 'post_id='+ id, //Here pass id via 
      success : function(data){
          $('#editBox').show('show'); //Show Modal
          $('.form-data').html(data); //Show Data
       }
    });
  });
});
</script>

而 PHP 文件 file.php 将与上述 带有引导模式事件的解决方案相同

将页面信息传递给模态

在某些情况下，只需将最少的信息传递（显示）到页面上已经可用的模式，只需引导模式事件即可完成，无需 Ajax Method 和 data-attributes

<td>
  <span 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>
  </span>
</td>

模态事件

$(document).ready(function(){
    $('#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');
        //Can pass as many onpage values or information to modal  
     });
});

【讨论】：

有没有办法跳过file.php？并用php函数交换？
据我所知，不，你不能跳过 file.php，合乎逻辑的原因是当页面加载它的所有内容时，当你用 id 调用 modal 时，你希望如何运行保持在同一页面上且没有任何外部文件源的功能或查询。
我对您的最后一个示例“将页面信息传递给模态”感兴趣。为了争论，假设<a data-book-id="<?php echo $obj->id;?>" 等于<a data-book-id="10" ...如何将“10”带入模态窗口并将其分配给php 变量？即：<?php $bookID = '10'; ?>?