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

Question

我一直在尝试从MySQL数据库检索数据，以便将其显示在javascript的模式/弹出框中。 这是我当前的进度：

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

这是我的模式弹出框的代码片段：

的HTML

此html触发器按钮将在其按钮属性ID中获取Report_ID，以将其传递给javascript。 “ onclick =” showDetails（this）;“>查看图片

   <!-- 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>

JAVASCRIPT

此javascript代码将是从html表获取Report_ID的代码。 Report_ID将是MySQL Query中的标识符，并将通过GET方法在php脚本Retrieve_Image.php中使用。 如果数据检索成功，则javascript会将值及其对应的ID（例如）传递给html。

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

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

 <?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);
?>

问题

它不会从php脚本返回任何数据。 我试图通过在$ _GET [“ Report_ID”]上放置一个值来运行php脚本； 而且没有问题。 我认为问题出在触发按钮上，该按钮使用按钮ID获取Report_ID。 我如何找到并解决问题？ 我想要的是首先显示“原始图像”和“ RGB图像”的文本值。

我要实现的示例（输出目标）：

PS我使用了引导程序模式框： https : //www.tutorialspoint.com/bootstrap/bootstrap_modal_plugin.htm

Answer 1

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

Answer 2

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