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

Question

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

当您点击“查看图片”按钮时

这是我的模态弹出框代码片段:

HTML

This html Trigger button will get the Report_ID in its button attribute id to pass it to javascript. " onclick="showDetails(this);">View Images

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

This javascript code willl be the one to get the Report_ID from the html table. Report_ID will be the identifier in MySQL Query and will be used in the php script Retrieve_Image.php using GET method. If the retrieval of the data is success the javascript will pass the values in to the html with their corresponding ids (ex. ).

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

This script / php code will retrieve the images data and will return its retrieved values to javascript using json encode.

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

问题

It does not returning any data from php script. I tried to run the php script by putting a value on $_GET["Report_ID"]; and it doesn't have a problem. I think the problem is on the trigger button, where it gets the Report_ID using button id. How can i find and fix the problem? All I want is to display the text values first for Original Image and RGB Image.

我要实现的目标示例(输出目标):

附言我使用了引导模态框: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);
        }  
    });
    }