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

Question

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

我想要做的是，当我单击其中一行时，它会加载 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;

在这之后，我做了一系列的回声来打印出我正在工作的模态信息（谢天谢地！）。

这是我尝试发送 HTTP 请求以根据我发送的 ID 在模态框上显示 issueDisplayModal.php 代码的 JQuery 代码。

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

$('#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 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); 所以@987654334 @应该是

$.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);
           }
        });
    });
});

Answer 2

因为您选择了数据切换选项，所以您可能在 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#