如何使用PHP的JQuery AJAX动态加载MySQL的数据?

I will try to describe as simple as possible what I am trying to achieve with my code. I am new with JQuery AJAX and all the examples online confuse me since they're all using Forms which i'm not using at all. Here is my fiddle to have a better understanding of what I'm doing: http://jsfiddle.net/x4d6jqxe/

I have 3 files : map.php , display_desk.php and display_station.php

When map.php is loaded (everything will be shown here) I want it call display_desk.php (this script creates DIVs to show small boxes on screen at XY coordinate thats being read from the database). When a DIV from display_desk.php is clicked, it will then open another DIV with information inside by the use of of a JQuery toggle function which is shown below.

Now, how do I make these JQuery AJAX calls for these scripts? If anything gets updated/deleted/inserted etc in my database I want it to appear LIVE on screen for all of these scripts.

thanks in advance!

map.php

<script type="text/javascript">
    /*I tried multiple examples like this but don't work...*/               
$(document).ready(function(){
$.ajax({
        type: "GET",
      url: "display_desk.php"
    }).done(function(data){
    alert(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
});

 /*I use this function to toggle the station_info DIV that I want it to call display_station.php */
    $(".desk_box").click( function() {
     $(".station_info").hide();   
    $("#station_info"+ $(this).attr('data') ).show();
    });

 </script>

**display_desk.php I want it to be called as soon that map.php is loaded **

<?php
include 'db_conn.php';

    //query to get X,Y coordinates from DB for the DESKS
$desk_coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates";
$desk_coord_result = mysqli_query($conn,$desk_coord_sql);

//see if query is good
if($desk_coord_result === false) {
    die(mysqli_error()); 
}

//didsplay Desk stations in the map
        while($row = mysqli_fetch_assoc($desk_coord_result)){   
        //naming X,Y values
        $id    = $row['coordinate_id'];
        $x_pos = $row['x_coord'];
        $y_pos = $row['y_coord'];
        //draw a box with a DIV at its X,Y coord     
        echo "<div class='desk_box' data='".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
                } //end while loop for desk_coord_result

 mysqli_close($conn);
?>

display_station.php I want it to load LIVE data when being clicken on with the toggle function above

<?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
echo "<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>";
            }//end while loop for station_result
   mysqli_close($conn);
doushi8186
doushi8186 能够做到这一点还有很多东西需要学习。阅读AJAX和WebSockets。如果您只想在用户执行某些操作时获取数据,则只需要AJAX,如果您需要在SERVER执行某些操作时更新页面,则需要使用Web套接字。socketo.me是一个很好的框架,用于处理PHP中的套接字。
接近 6 年之前 回复
dongqing344716
dongqing344716 或者长时间轮询以模拟实时更新。
接近 6 年之前 回复
dph58509
dph58509 你需要websockets/longpolling/comet-type的东西。
接近 6 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐