如何通过 AJAX 将 ID 发送到 PHP 文件并在 Bootstrap 模式中显示结果

Question

我有一个 table，其中行根据数据库记录动态显示。

我想做的是，当我单击其中一行时，它会加载 Bootstrap 模态，其中包含数据库中该特定记录的所有信息。

这是显示的每一行的代码，当我单击它时它会显示模态，但模态是空的，没有任何数据。

初始文件

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" <?php echo "id='" . $row['Issue_ID'] . "'"; ?> >

所以我试图获取此动态 ID 值并将其传递给名为 issueDisplayModal.php 的文件以进行查询，然后在模式上显示详细信息。这是另一个文件中的查询。

应接收 ID 的代码

$issueID = $_POST['record_id']
issueQue ="SELECT * FROM Issues WHERE Issue_ID = $issueID";
$result = $my_dbhandle->query($issueQue);
$numResults = $result->num_rows;

在此之后，我进行了一系列回显以打印出我开始工作的模态信息（谢天谢地！）。

这是我试图开始工作的 JQuery 代码，用于发送 HTTP 请求以根据我发送的 ID 在模式上显示 issueDisplayModal.php 代码。

AJAX 应该调用文件并发送 ID 变量

$('#myModal').on('show.bs.modal', function (e) {
   var $invoker = $(e.relatedTarget);
   var issue_id = $invoker.attr('id');

   $.ajax({
      type : 'post',
       url : 'issueDisplayModal.php', // in here you should put your query 
      data : 'post_id='+ issue_id, // here you pass your id via ajax .
                 // in php you should use $_POST['post_id'] to get this value 
   success : function(r)
       {
          // now you can show output in your modal 
         $('#mymodal').show();  // put your modal id 
         $('.something').show().html(r);
       }
   });

})

这是应该显示 issueDisplayModal.php

结果的模式

<!-- Modal -->
<div class="modal fade" id="myModal" 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">Issue Details:</h4>
      </div>

      <div class="modal-body">

        <div class="something">

         **results should be displayed here**

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Create Task</button>
        <button type="button" class="btn btn-primary">Close</button>
      </div>

    </div>
  </div>
</div>

Answer 1

因为您选择了数据切换选项，所以您可能在 tr 元素上绑定了多个点击事件。

如果您没有获得成功响应，那么模态弹出的唯一原因是这些属性。

如果您想在同一个点击事件上触发 ajax 调用，请使用内置模态事件

$('#myModal').on('show.bs.modal', function (e) {
    var $invoker = $(e.relatedTarget);
    var issue_id = $invoker.attr('id');
   // now do the $.ajax() call and test for a response
 })

下面是这种事情的一个工作示例： http://www.bootply.com/WTgjFfxWSl#

Answer 2

您的方法中存在一些错误和不必要的代码

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" <?php echo "id='" . $row['Issue_ID'] . "'"; ?> >

将<?php echo "id='" . $row['Issue_ID'] . "'"; ?>更改为data-id="<?php echo $row['Issue_ID'];?>"

<tr class="issuesTable push" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['Issue_ID'];?>" >

然后在bootstrap modal events中你可以在一个变量中获取id，不需要定义2个变量

var $invoker = $(e.relatedTarget);
var issue_id = $invoker.attr('id');

你可以这样得到id；

var invoker = $(e.relatedTarget).data('id');

接下来，在 Ajax 方法中，success: function 完全错误，您不需要再次显示模态 $('#mymodal').show(); 也不需要再次显示div something $('.something').show().html(r); 所以 success: function 应该是

$.ajax({
   type: 'post',
   url: 'issueDisplayModal.php', // in here you should put your query 
   data: 'post_id=' + invoker, // change issue_id to invoker .
   // in php you should use $_POST['post_id'] to get this value 
   success: function (r) { //Change
       // now you can show output in your modal 
       //$('#mymodal').show(); // Don't need this
       $('.something').html(r); // Don't need .show() Here
   }
});

PHP

在Ajax中，数据是post_id，但你正在获取$_POST['record_id']，它应该是$_POST['post_id'];

$issueID = $_POST['post_id'];
issueQue ="SELECT * FROM Issues WHERE Issue_ID = '$issueID'";
$result = $my_dbhandle->query($issueQue);
$numResults = $result->num_rows;

获取模态结果

echo $numResults;

旁注：确保脚本 DOM 准备就绪。

$(document).ready(function(){
   //Put your script Here
});

仅此而已，开箱即用。

编辑

最终脚本看起来像

$(document).ready(function(){
    $('#myModal').on('show.bs.modal', function (e) {
        var invoker = $(e.relatedTarget).data('id');
        alert(invoker);
        $.ajax({
           type: 'post',
           url: 'issueDisplayModal.php',
           data: 'post_id=' + invoker,
           success: function (r) {
               $('.something').html(r);
           }
        });
    });
});

如何通过 AJAX 将 ID 发送到 PHP 文件并在 Bootstrap 模式中显示结果

How to send an ID through AJAX to a PHP file and display the result in a Bootstrap Modal

php

ajax

jquery

twitter-bootstrap

bootstrap-modal