使用 AJAX 在 Bootstrap 模式上调用 PHP 函数

Question

我使用 PHP 循环在我的页面上回显了一个用户列表。当我单击每个用户的名称时，会弹出一个 Bootsrap 模式并显示该用户的更多详细信息。链接看起来像这样。

<a href="#user"  data-toggle="modal"  data-id="{$user['id']}">UserName</a>

如您所见，我将用户 ID 传递给 Bootstrap 模态，以便我可以通过在 Bootstrap 中调用 get_user_by_id() 来使用它来检索用户的其他信息] 模态

模态看起来像这样

<div class="modal fade" id="user">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <?php
          $user = get_user_by_id($id);
         ?>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JS代码是这样的

$('#user').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget)
   var id = button.data('id')
})

根据上面的JS代码，我在var id变量中有我的用户ID。但是，我无法想象如何将上述 PHP 函数的值用作参数。

有什么办法吗？

我已将问题编辑为更独特的关于 AJAX 方法的问题，大多数答案都基于 AJAX

PS：我对 PHP 和 Bootstrap 很陌生。

Answer 1

您将要使用 ajax 到运行 PHP。正如@Tom 所述，javascript 在 DOM 中加载后无法访问 PHP。 PHP 是一种服务器端语言，只能这样访问。

通过 ajax 连接到 PHP 后，您就可以使用 return 中的内容加载 div。只有在内容加载后才应打开模态框，否则你会看到框出现时跳动的样子，然后内容才出现。

基本示例

$(".btn").click(function(){
    // AJAX code here.
    $.ajax(
    ....
    success: function($data){
      $('.target').html(data)
      $("#myModal").modal('show');
    }
    );
});

Answer 2

这样你想解决这个问题是不可能的。因为要从 PHP 中的服务器获取数据，您必须向服务器请求，而最好的方法可能是提交表单。在这里你想以模式显示你的数据，所以你需要异步进行。所以你可以这样尝试-

    //keep a button to show the modal for user details
    <button class="detail" data-toggle="modal" data-target="#user_modal" data-id="<?= $user->id ?>">Detail</button>

    //and using jQuery on the click of the above button post a form to your desire url
        $(document).on("click", ".detail", function () {
            var id = $(this).data('id');
             $.ajax({
                    type: "POST",
                    url: "your/url",
                    data: { id: id},
                    success: function(data) {
   //and from data you can retrive your user details and show them in the modal

                    }});
                 });

Answer 3

Bootstrap 模式允许您加载远程页面，我相信这就是您要找的...

<a href="userdata.php?uid=<?php echo $user['id']?>" data-target="#user" data-toggle="modal"  data-id="{$user['id']}">UserName</a>

然后模态变成：

<div class="modal fade" id="user" tabindex="-1" role="dialog" aria-labelledby="user" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content"></div></div></div>

和userdata.php

<?php
$user_id = $_GET['uid'];
$user = get_user_by_id( $user_id );
?>

<div class="modal-header">
    HEADER STUFF GOES HERE
</div>

<div class="modal-body">
    USER INFO GOES HERE
</div>

<div class="modal-footer">
    MODAL FOOTER HERE
</div>

Answer 4

Bootstrap modal 有一个选项 remote，但是在 Bootstrap v3.3.0 上 deprecated 并且将会在 v4 中被删除。您可以使用 jQuery.load。例如

$( "#some-click" ).on('click', function() {
    var userId = button.data('id'); //get user id here
    //jQuery.load set html with modal and user details by id  
    $( "#user" ).load( "/not-here.php", { id:userId });
});

使用 AJAX 在 Bootstrap 模式上调用 PHP 函数

Call a PHP function on a Bootstrap Modal using AJAX

javascript

php

twitter-bootstrap-3

bootstrap-modal