javascript - 基于参数的 Bootstrap 模式动态远程内容

Question

您好，我正在处理 Bootstrap 模式中显示的弹出窗口。我正在创建在表格中显示的按钮，如下所示:

<button class = "sendbt btn btn-default" href="test.php?spz='.$row['id'].'" data-target="#myModal" data-toggle="modal"><b>Test</b></button>

因此，根据 $row['id']，表格每一行上按钮的远程内容应该不同 - 它是来自数据库的变量，表格是通过 php echo 循环创建的。问题是我的模式弹出窗口始终显示基于我单击的第一个按钮的内容，然后在我关闭它之后，其他行中的每个其他按钮都显示相同的内容。它不会根据参数而改变。我需要重新加载页面，以在不同的按钮上显示更改的内容。有没有办法让它工作，让表格中的每个按钮都根据我的参数显示正确的内容，而无需每次都重新加载页面？

感谢您提供可能的建议。

Answer 1

执行此操作的最佳方法是向按钮添加自定义属性并从按钮中删除 href 属性...使按钮具有类型按钮并将动态 ID 分配给在行中创建的每个按钮，如下所示

<button type="button" class = "sendbt btn btn-default" data-id="$row['id']"><b>Test</b></button>

现在给按钮添加点击监听器并找到它的data-id，然后发送ajax请求并用响应更新模态内容:编写 jquery 发送请求到 test.php 页面

$('body').on('click','.sendbt',function(){
     var data-id = $(this).attr('data-id');
      $.ajax({
         dataType : 'html',
         'type': 'GET',
         'data' : {id:data-id},
          'url' : 'test.php',
          success : function(data){
            $('#myModal tbody-content').html(data);
             $('#myModal').modal('show');
},
          error : function(){
       console.log("There is an Error ....!")
}

});
});

在你的 Test.php 中

    if(isset($_REQUEST['id'])){
   $query = mysql_query("select * from table_name where id=".$_REQUEST['id']);
$row = mysql_fetch_array($query);
$content = $row['your_attribute'];
echo $content;
}

每次请求都会显示你发送的id相关的内容