html、javascript、php和javascript

7xzttuei  于 2021-06-18  发布在  Mysql
关注(0)|答案(2)|浏览(410)

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

单击“查看图像”按钮时

下面是模态弹出框的代码片段:
html格式
此html触发器按钮将在其按钮属性id中获取报告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表中获取报表id的代码。report\u id将是mysql查询中的标识符,并将在php脚本retrieve\u image.php中使用get方法。如果数据检索成功,javascript将把值传递给html,并带有相应的id(例如)。

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 encode将检索到的值返回到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\u id”]上输入一个值来运行php脚本;而且没有问题。我认为问题出在触发器按钮上,它使用按钮id获取报告id。如何查找和解决问题?我只想先显示原始图像和rgb图像的文本值。
我尝试实现的示例(输出目标):

p、 我使用了引导模式框:https://www.tutorialspoint.com/bootstrap/bootstrap_modal_plugin.htm

k5ifujac

k5ifujac1#

将ajax代码放在showdetails函数中。

bwleehnv

bwleehnv2#


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

相关问题