如何在模态中从mysql获取相应的id数据?

时间:2019-06-20 11:16:44

标签: php jquery mysqli bootstrap-4 bootstrap-modal

我的网站上有不同的图像按钮,单击图像后将显示不同的模式。我为图像按钮分配了不同的ID。我想从mysql获取相应的id数据到模式内容。但是如何将jquery的值传递给php?

我创建了一个变量来存储imagebutton的ID。但是我不知道如何将值传递给php并使用它从我的sql中获取数据。

// imagebutton主页//

<div class="col-md-2 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="5"><img src="images\123.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>

//外部模式//

<!--  player Modal -->
<div class="modal fade" id="modal5" tabindex="-1" role="dialog" aria- 
labelledby="modal5" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">

// jquery脚本//

$('a.playerbutton').click(function(event) {
    var status = $(this).attr('id');
    var url = "modal.php?id=" + status;
    alert(url);
    $('.modal-container').load(url,function(result){
        $('#modal' + status).modal({show:true});
    );
}); 

我想使用url中的id从mysql获取相应的数据。但是我不知道如何将值传递给php。谢谢您的帮助。

// php //

<?php include 'login.php';
$id = $_GET["id"];
$sql = "SELECT * FROM player
WHERE id = "$id";";
$res=$mysqli->query($sql);
if (mysqli_num_rows($res) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($res)) {
    echo "id: " . $row["ID"]. " - Name: " . $row["Name"].  "<br>";}
} else {
echo "0 results";
}
$mysqli->close();
?>


<!--  player Modal -->
<div class="modal fade" id="modal+$id" tabindex="-1" role="dialog" aria- 
labelledby="modal+$id" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--  Content of modal -->

1 个答案:

答案 0 :(得分:0)

如果我正确理解,您希望数据以模态形式呈现在SQL数据库中。从本质上讲,如果不对代码进行一些提示,就无法轻松地用Javascript渲染PHP。

更好的方法是设置一个可以接受数据的单独的PHP文件,然后将其分别重新编入元素

您可能会在服务器的php文件中想要这样的东西。

`<?php
///This is to protect the various API methods
   error_reporting(0);
   $method = $_SERVER['REQUEST_METHOD'];
   switch ($method) {
   case 'PUT':
      header("Location: https://yoururl");   
     break;
   case 'POST':
      $json = json_decode(file_get_contents('php://input'), true);
      header( "Content-Type: application/json" );
      http_response_code (200);
      echo json_encode($json);
      break;
  case 'GET':
     header("Location: https://yoururl"); 
     break;
  default:
     header("Location: https://yoururl");  
     break;
 }

fucnction RetrieveDataFromServer($data){
/// Do something to get your data
return $data;
}

然后,您将需要像这样设置ajax查询:

$.ajax({
    type:'post',
    url:'url for your php file',
    contentType: 'applicaition/json',
    data: data /// (could  be form data or data required like the id),
    success: function (data){
     //Inspect the data and then append to your html elements
    },
    error: function(x,e){
       console.log(e) ///This is so you can inspect the console and find our the errors you are facing in posting the data
    if (x.status==0) {
            console.log('You are offline!!\n Please Check Your Network.');
        } else if(x.status==404) {
            console.log('Requested URL not found.');
        } else if(x.status==500) {
            console.log('Internel Server Error.');
        } else if(e=='parsererror') {
            console.log('Error.\nParsing JSON Request failed.');
        } else if(e=='timeout'){
            console.log('Request Time out.');
        } else {
            console.log('Unknow Error.\n'+x.responseText);
        }
    }
});

我希望这会有所帮助,并希望我回答了您的问题。

注意:请记住,这是异步的,您可能需要考虑服务器调用的时间并将其呈现在页面上。

如果我错过了任何事情,只需添加评论,我就可以在需要时更新答案。