在执行AJAX调用时，没有从PHP创建DIV - DIV not being created from PHP when doing AJAX call

我正试图在我的主PHP文件中调用一个PHP脚本。下面是主php文件的Jquery/Ajax部分。display_stationinfo.php应该在main中创建DIV，但事实并非如此。

这是我迄今为止所尝试的，我对Jquery和AJAX是新手。提前感谢！

工作小提琴：http://jsfiddle.net/52n861ee/这就是我想做的，但当我点击desk_boxDIV时，我的display_stationinfo.php脚本并没有创建toggle-station_infoDIV。

当我查看源代码时，两个DIV都应该已经创建，但只有desk_box是..我做错了什么？

JQuery/AAJAX部分：

<div id="map_size" align="center">
    <script type="text/javascript">
        //Display station information in a hidden DIV that is toggled
        //And call the php script that queries and returns the results LIVE
        $(document).ready(function() {
            $(".desk_box").click(function() {
                alert("before toggle");
                var id = $(this).attr("data")
                alert(id);
                alert($(this));
                $("#station_info_"+id).toggle();
                alert("after toggle");
                $.ajax({
                    url: 'display_stationinfo.php',
                    type: 'GET',
                    success: function(result) {
                        alert("before result");
                        $("#station_info_"+id).html(result);
                        alert("result: " + result); //it shoes every DIV being created and not the one that I clicked on
                        alert("after result");
                    }
                });//end ajax
            });//end click
        });//end ready
    </script>
</div> <!-- end map_size -->

display_station.php（我想调用的脚本）：

<?php
include 'db_conn.php';
//query to show workstation/desks information from DB for the DESKS
$station_sql = "SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";
$station_result = mysqli_query($conn,$station_sql);
//see if query is good
if ($station_result === false) {
    die(mysqli_error()); 
}

//Display workstations information in a hidden DIV that is toggled
while ($row = mysqli_fetch_assoc($station_result)) {
    //naming values
    $id       = $row['coordinate_id'];
    $x_pos    = $row['x_coord'];
    $y_pos    = $row['y_coord'];
    $sec_name = $row['section_name'];
    //display DIV with the content inside
    $html = "<div class='station_info_' id='station_info_".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
    echo $html;
}//end while loop for station_result
mysqli_close($conn); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?

？>

"SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";

从表坐标中提取每一行，这就是你想要做的吗？还是只想返回带有用户单击的id的行？

jQuery

$.ajax({
  url: 'display_stationinfo.php',
  data: { 'id': id },
  type: 'POST',
  success: function(result) {}
});

php

$id = $_POST['id']
"SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates WHERE coordinate_id == " $id;

看看你的例子，我还猜测问题可能是你返回了一个字符串，并将其放入目标div中，这样完成的div看起来像这样：

<div class="station_info_" id="station_info_84" style="position: absolute; left: 20px; top: 90px; display: block;">
  <div class="station_info_" id="station_info_84" style="position:absolute;left:20px;top:90px;">
    Hello the id is:84<br>
    Section:Section B<br>
  </div>
</div>

您可以返回json对象并仅将数据附加到目标div ，而不是返回字符串

php

while ($row = mysqli_fetch_assoc($station_result)) {
    $id       = $row['coordinate_id'];
    $x_pos    = $row['x_coord'];
    $y_pos    = $row['y_coord'];
    $sec_name = $row['section_name'];
    $result = array('id' => $id, 'x_pos' => $x_pos, 'y_pos' => $y_pos, 'sec_name' => $sec_name);
    echo json_encode($array);
}

jQuery

$.ajax({
  url: 'display_stationinfo.php',
  data: { 'id': id },
  type: 'POST',
  dataType: "json",
  success: function(json) {
    $("#station_info_"+id)
      .css({'left':json.x_pos ,'top': json.y_pos})
      .append('<p>Hello the id is:'+ json.id +'</br>Section:'+ json.sec_name +'</p>');
  }
});