Javascript 让div充当按钮对象来检索数据

我使用以下代码填充了一个列表。 我试图使从服务器检索到的每个对象都像一个按钮，单击时弹出一个显示地址、日期和状态的弹出框。有什么办法可以这样做吗？我一直在研究使用Ajax，但它有点让人困惑，因为我有一个html文件和一个php文件，其中包含我所有的javascript/php（javascript依赖于php函数），从我所读到的内容来看，我需要制作另一个php文件来服务请求。那么，我将如何在html文件中引用它来执行此操作？我可能让事情变得更难了

原始代码：

<?php
    function getjson(){
        $db_connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
        if(mysqli_connect_errno()){
            echo "Failed to connect to Mysql: " . mysqli_connect_error();
        }

        $sql = "SELECT misc, lng, lat FROM information WHERE username = '" . $_SESSION['user_name'] . "';";
        $result = $db_connection->query($sql);
        $temp = array();
        while($row = $result->fetch_assoc()) {
            $temp[] = $row;
        }

        $db_connection->close();
        $json = json_encode($temp);         
        return $json;   
    }

    function getwarnings(){
        $username = $_SESSION['user_name'];
        $db_connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

        if(mysqli_connect_errno()){
            echo "Failed to connect to Mysql: " . mysqli_connect_error();
        }

        $sql = "SELECT misc, date, id, address, status FROM information WHERE username = '" . $username . "';";
        $result = $db_connection->query($sql);

        if ($result->num_rows > 0) {
        // output data of each row
            while($row = $result->fetch_assoc()) {

                switch($row["status"]){
                    case 3:
                        echo '<div id= "content" style = "background-color: red" onclick = popinformation(' . $row["id"] . ')> ' . $row["address"] . "</div>";
                        break;
                    case 4:
                        echo '<div id= "content" style = "background-color: yellow" onclick = popinformation(' . $row["id"] . ')> ' . $row["address"] . "</div>";
                        break;
                    case 5:
                        echo '<div id= "content" style = "background-color: green" onclick = popinformation(' . $row["id"] . ')> ' . $row["address"] . "</div>";
                        break;
                }
            }
        }

        $db_connection->close(); 
    }

    function getalerts($id){
        $db_connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

        if(mysqli_connect_errno()){
            echo "Failed to connect to Mysql: " . mysqli_connect_error();
        }
        $sql = "SELECT misc, date, id, address, status FROM information WHERE id = '" . $id . "';";
        $result = $db_connection->query($sql);
        $temp = array();
        $row = $result->fetch_assoc();
        $temp[] = $row;

        $db_connection->close();

        return json_encode($temp);
    }
?>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>

function getlocations(){
    var data = <?php echo getjson(); ?>;
    var i = 0;
    var locations = new Array();
    for(i; i < data.length; i++){
        var dataholder = [data[i].misc, parseFloat(data[i].lat), parseFloat(data[i].lng)];
        locations.push(dataholder);
    }
    return locations;
}

function createmap(){
    var locations = getlocations();

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: new google.maps.LatLng(47.624561, -122.356445),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

    function popinformation(data){
    var json = <?php getalerts(); ?>
    console.log(json);
}

---

将所有数据库结果放入一个数组，然后将其转换为一个Javascript对象，弹出函数可以通过ID查找该对象

function getwarnings(){
    $username = $_SESSION['user_name'];
    $db_connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    if(mysqli_connect_errno()){
        echo "Failed to connect to Mysql: " . mysqli_connect_error();
    }

    $sql = "SELECT misc, date, id, address, status FROM information WHERE username = '" . $username . "';";
    $result = $db_connection->query($sql);

    $colors = array(3 => 'red', 4 => 'yellow', 5 => 'green');
    $results = array();
    while ($row = $result->fetch_assoc()){
        $results[$row['id']] = $row;
        echo '<div class="content" style = "background-color: ' . $colors[$row['status']] . '" data-id="' . $row["id"] . '"> ' . $row["address"] . "</div>";
    }
    $db_connection->close(); 
    ?>
    <script>
    $(document).ready(function() {
        var information_object = <?php echo json_encode($results); ?>;
        $(".content").click(function() {
            var info = information_object[$(this).data('id')];
            if (info) {
                alert("Address: " + info.address + "\nDate: " + info.date + "\nStatus: " + info.status);
            } else {
                alert("Invalid ID: " + id);
            }
        });
    });
    </script>
    <?php
}

函数getwarnings（）{
$username=$\会话['user\u name']；
$db\u connection=newmysqli（db\u主机、db\u用户、db\u密码、db\u名称）；
if（mysqli\u connect\u errno（））{
echo“未能连接到Mysql:”.mysqli_connect_error（）；
}
$sql=“从username=”“$username.”“；”中的信息中选择杂项、日期、id、地址、状态；
$result=$db\u连接->查询（$sql）；
$colors=数组（3=>“红色”，4=>“黄色”，5=>“绿色”）；
$results=array（）；
而（$row=$result->fetch_assoc（））{
$results[$row['id']]=$row；
回显“.$行[“地址”]。”；
}
$db_连接->关闭（）；
?>
$（文档）.ready（函数（）{
var信息_object=；
$（“.content”）。单击（函数（）{
var info=信息\对象[$（this）.data（'id'）；
如果（信息）{
警报（“地址：+info.Address+”\n数据：+info.date+”\n状态：+info.status）；
}否则{
警报（“无效ID:+ID”）；
}
});
});
您需要提供您的
javascript
，这是创建弹出窗口的关键所在您不能使用相同的
id=“content”
在每个DIV中，ID都应该是唯一的。是的，我知道，我本想把它们改成类，但却忘了回去这么做。谢谢你指出这一点！尝试一些东西，但我不想让自己看起来像个白痴……这很可能会发生。我会马上发布我的javascript/更新的php。回音行中有一些引用错误，现在就试试吧。这可能是另一个引用问题。
您正在启用XDebug的情况下运行脚本。当它报告错误时，它假设输出是HTML，因此会在其周围放置HTML标记。啊，问题是您有
echo json_encode（$results）
在
getwarnings
函数之外，因此
$results
变量不在范围内。问题中的原始代码发生了什么变化？当您将问题更改为使用我的代码时，我的答案没有意义。
    <html>
    <head>
       <link rel="stylesheet" href="css/logged_in.css">
       <?php    
           include("login_php_scripts.php");
       ?>
    </head>
    <body>
    <div id="navigation">
       <a href="index.php?logout">Account</a> 
       <a href="index.php?logout">Logout</a>
    </div>

   <div id="header">
      <div id="logo"></div>
      <div id="header_text"></div>
  </div>

  <div id="content_wrapper">
     <div id="list_view">
          I am logged in as: <?php echo $_SESSION['user_name']; ?></br>
          <?php 
             getwarnings();
           ?>


     </div>

  <div id="map">
      <script> 
        createmap();
      </script>
</div>
</div>
<div id="footer"></div>
</body>
</html>

function getwarnings(){
    $username = $_SESSION['user_name'];
    $db_connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    if(mysqli_connect_errno()){
        echo "Failed to connect to Mysql: " . mysqli_connect_error();
    }

    $sql = "SELECT misc, date, id, address, status FROM information WHERE username = '" . $username . "';";
    $result = $db_connection->query($sql);

    $colors = array(3 => 'red', 4 => 'yellow', 5 => 'green');
    $results = array();
    while ($row = $result->fetch_assoc()){
        $results[$row['id']] = $row;
        echo '<div class="content" style = "background-color: ' . $colors[$row['status']] . '" data-id="' . $row["id"] . '"> ' . $row["address"] . "</div>";
    }
    $db_connection->close(); 
    ?>
    <script>
    $(document).ready(function() {
        var information_object = <?php echo json_encode($results); ?>;
        $(".content").click(function() {
            var info = information_object[$(this).data('id')];
            if (info) {
                alert("Address: " + info.address + "\nDate: " + info.date + "\nStatus: " + info.status);
            } else {
                alert("Invalid ID: " + id);
            }
        });
    });
    </script>
    <?php
}