执行 AJAX 调用时未从 PHP 创建 DIV

Question

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

这是我到目前为止所尝试的，我是 Jquery 和 AJAX 的新手。提前致谢！

工作小提琴：http://jsfiddle.net/52n861ee/ 这就是我想要做的，但是当我点击desk_box DIV 时，我的display_stationinfo.php 脚本没有创建切换station_info DIV。

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

JQuery/AJAX 部分：

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

?>

Answer 1

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

看着你example，我也猜想问题可能是你正在返回一个字符串并将其放入目标 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>');
  }
});