Question

我使用以下代码填充了一个列表。我试图让从服务器检索的每个对象都像一个按钮，当点击时抛出一个显示地址，日期和状态的弹出框。反正有没有这样做？我一直在研究使用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);
}

更新

以下是我的尝试，从我读过的内容我对php / javascript有误解。这是我文件中的所有代码。颜色看起来不错但弹出窗口没有出现，Console报告Uncaught SyntaxError：Unexpected token＆lt;如果我删除最终脚本，它将消失。我认为这意味着错误是以某种方式在echo json_encode（$ results）中。

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

    $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(); 
}

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 date, id, address, status FROM information WHERE id = '" . $id . "';";
    $result = $db_connection->query($sql);
    $temp = array();
    while($row = $result->fetch_assoc()) {
        $temp[] = $row;
    }

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

    <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));
    }
}
    </script>

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

我的HTML文档

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

Answer 1

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

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
}

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

1 个答案: