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

我有一个基于数据库记录动态显示行的表

我试图做的是，当我单击其中一行时，它会加载引导模式，其中包含数据库中特定记录的所有信息

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

初始文件

$('#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);
       }
   });

})

---

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

下面是这类事情的一个工作示例：
您的方法中有几个错误和不必要的代码

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

您可以像这样获得
id

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

接下来，在Ajax方法中，
success:function
完全错误，您不需要再次显示模式
$（“#mymodal”）.show（）something
$（'.something'）.show（）.html（r）因此
成功：函数
应该

$.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\u id
，但您正在获取
$\u post['record\u id']
，它应该是
$\u post['post\u 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);
           }
        });
    });
});

那么当你点击那个按钮时会发生什么呢？你能澄清那些对你不起作用的地方吗？还有什么地方不见了？有错误信息吗？如果您能发布更多关于javascript连接位置的详细信息，也会有所帮助，例如，一个完整的HTML测试页面会很好…模式显示出来，但它是空的。我不知道php文件是否没有被调用，或者它是否没有正确地传递ID。让我发布一段更大的代码。我只是不想被所有的代码淹没。当你把它写到控制台时，r中有什么东西吗？在调用.show（）之前，执行console.log（r）以查看响应中是否有任何内容。我认为r.@AbrahamA中没有任何内容。如果您还没有弄清楚，问题在于
然后
var$invoker=$（e.relatedTarget）关于多个单击的绑定，您是对的。我删除了数据切换选项，它停止拉空模式。我试试你的想法，看看效果如何。非常感谢。您可以使用数据切换属性，只需在调用ajax之前挂接到show.bs.modal事件。我将进一步更新示例，向您展示如何从invokerOk获取值。我尝试了您的第一个代码，但遗憾的是它没有工作：（更新了示例。为了澄清，您仍然需要数据切换属性来触发模式。您不需要$（'push'））。点击思考我很难过地说它不起作用。我觉得我离它起作用已经很近了。这只是一件小事。我在描述中更新了我的AJAX代码，这样你就可以看到我把它改成了什么。哇！非常感谢你提供的难以置信的帮助！这是我第一次尝试AJAX，正如你所展示的，我做得不正确。我将我继续并实现您的解决方案。再次非常感谢！我对代码进行了更改，但我认为现在的问题是当模式打开时Javascript没有启动。因此，基本上这行代码没有按应有的方式启动。$（'#myModal'）。on（'show.bs.modal'，function（e）{}设置一个
警报（invoker）；
若要查看id是否正在传递给modal，也可以将
show.bs.modal
更改为
show.bs.modal
不，由于某种原因它不会触发。我添加了这两个警报，但两个警报都没有显示。警报（调用程序）；警报（“加载了模态脚本”）；我在您的评论之前更改了show.bs.modal：（并且您在模式呼叫按钮
data id=”“
$issueID = $_POST['post_id'];
issueQue ="SELECT * FROM Issues WHERE Issue_ID = '$issueID'";
$result = $my_dbhandle->query($issueQue);
$numResults = $result->num_rows;

echo $numResults;

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