在模式框/弹出窗口中查看值-HTML、JavaScript、PHP和JavaScript

我一直在尝试从MySQL数据库中检索数据，以便在javascript的模式/弹出框中显示它。以下是我目前的进展：

当您单击“查看图像”按钮时

以下是模式弹出框的代码片段：

HTML

此html触发器按钮将在其按钮属性ID中获取报告ID，以将其传递给javascript。 “onclick=“showDetails（此）；“>查看图像

PHP

此脚本/php代码将检索图像数据，并使用json encode将检索到的值返回给javascript

---

将ajax代码放在showDetails函数中。
您的
ajax
代码不在showDetails

函数中。将数据：（“报告ID”：报告ID）更改为数据：{“报告ID”：报告ID}，

   <!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
   <div class = "modal-dialog">
      <div class = "modal-content">
         <div class = "modal-header">
           <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>&nbsp;
            <h4 class = "modal-title" id = "myModalLabel">
               Images of the Report
            </h4>
         </div>
         <div class = "modal-body">
            <p>Original Image: <span id = "Orig_Image"></span></p>
            <p>RGB Image: <span id = "RGB_Image"></span></p>
            <!--<img src="smiley.gif" alt="Smiley face" height="200" width="200">-->
         </div>
        <!-- <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>-->
         </div>
      </div>
   </div>

function showDetails(button){
    var Report_ID = button.id;
}
$.ajax({
    url: "Retrieve_Image.php",
    method: "GET",
    data: ("Report_ID": Report_ID),
    success: function(response){
        //alert(response);
        var Images = JSON.parse(response);
        $("#Orig_Image").text(Images.Original_Image_Directory);
        $("#RGB_Image").text(Images.RGB_Image_Directory);
        $("#myModalLabel").text(Images.Image_Name);
    }
    error: function(e){
        alert('Error: '+e);
    }  
});

 <?php
session_start();
include_once ("../System_Connector.php");
include_once ("Admin_Session_Checker.php");

$Report_ID = $_GET["Report_ID"];

$Retrieve_Report = "SELECT Image_Name,Original_Image_Directory,RGB_Image_Directory FROM Report_Image WHERE Report_ID = $Report_ID";
$Retrieval_Image_Query = mysqli_query($Connection, $Retrieve_Report);

if(!$Retrieval_Image_Query){
     echo "<script type = 'text/javascript'> alert('Error: Could not retrieve data from database because of this error: '".mysqli_error($Connection)."') </script>";
}

$Report_Result = mysqli_fetch_object($Retrieval_Image_Query);
echo json_encode($Report_Result);
?>

### add $.ajax inside showDetails ###

function showDetails(button){
        var Report_ID = button.id;
    $.ajax({
        url: "Retrieve_Image.php",
        method: "GET",
        data: {"Report_ID": Report_ID},
        success: function(response){
            //alert(response);
            var Images = JSON.parse(response);
            $("#Orig_Image").text(Images.Original_Image_Directory);
            $("#RGB_Image").text(Images.RGB_Image_Directory);
            $("#myModalLabel").text(Images.Image_Name);
        }
        error: function(e){
            alert('Error: '+e);
        }  
    });
    }