javascript 使用 AJAX 在 Bootstrap Modal 上调用 PHP 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29831077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call a PHP function on a Bootstrap Modal using AJAX
提问by TharinduLucky
I have a list of users echoed on my page using a PHP loop. When I click each user's name, a Bootsrap Modal pops up and display further details of the user. The links look like this.
我有一个使用 PHP 循环在我的页面上回显的用户列表。当我单击每个用户的名称时，会弹出一个 Bootsrap Modal 并显示用户的更多详细信息。链接看起来像这样。
<a href="#user" data-toggle="modal" data-id="{$user['id']}">UserName</a>
As you can see, I'm passing user's ID to the Bootstrap modal so that I can use it to retrieve other information of the user by calling get_user_by_id()in the Bootstrap Modal.
如您所见，我将用户的 ID 传递给 Bootstrap 模态，以便我可以使用它通过调用get_user_by_id()Bootstrap 模态来检索用户的其他信息。
Modal Looks like this
模态看起来像这样
<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 code is like this
JS代码是这样的
$('#user').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
})
According to the above JS code, I have my user's ID in var idvariable.
But, ther's no way I can imagine how to use that value for the above PHP function as the argument.
根据上面的JS代码，我的用户ID是var id可变的。但是，我无法想象如何使用上述 PHP 函数的值作为参数。
Is there any possible way for that?
有什么可能的方法吗？
I have edited the question to be more unique about AJAX methods which most answers were based on AJAX
我编辑了这个问题，使其更加独特，因为 AJAX 方法的大多数答案都基于 AJAX
PS: I'm very new to PHP and Bootstrap.
PS：我对 PHP 和 Bootstrap 很陌生。
采纳答案by Cayce K
You will want to use ajaxto run the PHP. As @Tom states javascript cannot access PHP after the loading in the DOM. PHP is a server side language and can only be accessed as such.
您将需要使用ajax来运行 PHP。正如@Tom 所说，在 DOM 中加载后，javascript 无法访问 PHP。PHP 是一种服务器端语言，只能这样访问。
Once you connect to the PHP through ajax you can then load the divwith the content from the return. Only AFTER the content is loaded should you open the modal otherwise you will have a jumpy look of the box showing up and then content just appearing.
一旦您通过 ajax 连接到 PHP，您就可以加载div返回的内容。只有在加载内容后才应打开模式，否则您会看到显示框的跳跃外观，然后内容才出现。
Basic example
基本示例
$(".btn").click(function(){
// AJAX code here.
$.ajax(
....
success: function($data){
$('.target').html(data)
$("#myModal").modal('show');
}
);
});
回答by Khairul Islam
In that way you want to solve this problem is not possible. Because to get data from server in PHP you must request to the server and the best probably only way is submit a form. As here you want to show your data in a modal so you need to do it asynchronously. So you can try like this-
那样你想解决这个问题是不可能的。因为要在 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
}});
});
回答by mbeintema
Bootstrap modals allow you to load a remote page and this is what you are looking for I believe...
Bootstrap modals 允许你加载一个远程页面，这就是你正在寻找的我相信......
<a href="userdata.php?uid=<?php echo $user['id']?>" data-target="#user" data-toggle="modal" data-id="{$user['id']}">UserName</a>
Then the modal becomes:
然后模态变成：
<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>
And userdata.php
和 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>
回答by A.J.
Bootstrap modal has a option remote, but on Bootstrap v3.3.0 is deprecatedand will be removed in v4. You can use jQuery.load. For example
Bootstrap modal 有一个选项remote，但在 Bootstrap v3.3.0 上已弃用，并将在 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 });
});
