Javascript 如何使用JQuery或AJAX调用PHP脚本而不刷新页面？

更新的代码我试图调用主PHP文件中的PHP脚本，所有内容都将显示在该文件中。我只想用正在运行的SQL查询显示PHP脚本的结果

我还想包括动态显示结果/不刷新页面的可能性

这就是我到目前为止所尝试的，我对Jquery和AJAX还不熟悉。提前谢谢

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() {
                        $id = $(this).attr("data")
                    $("#station_info_"+$id).toggle();
                        
                    $.ajax({
                        url:"display_stationinfo.php",
                        success:function(result){
                    $("#map_size").html(result);
                    }});//end ajax  
                    });//end click
                    });//end ready
    </script>
</div> <!-- end map_size -->

<?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>";
}//end while loop for station_result
    echo $_GET['callback'] . '(' .json_encode($html) . ')';             
mysqli_close($conn); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?

//在切换的隐藏DIV中显示桩号信息
//并调用php脚本查询并实时返回结果
$（文档）.ready（函数（）{
$（“.desk_box”）。单击（函数（）{
$id=$（this.attr（“数据”）
$（“#站点信息”+$id）.toggle（）；
$.ajax({
url:“display_stationinfo.php”，
成功：功能（结果）{
$（“#地图大小”）.html（结果）；
}})；//结束ajax
})；//结束单击
});//准备就绪

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

<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() {
                        $id = $(this).attr("data")
                    $("#station_info_"+$id).toggle();
                        
                    $.ajax({
                        url:"display_stationinfo.php",
                        success:function(result){
                    $("#map_size").html(result);
                    }});//end ajax  
                    });//end click
                    });//end ready
    </script>
</div> <!-- end map_size -->

<?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>";
}//end while loop for station_result
    echo $_GET['callback'] . '(' .json_encode($html) . ')';             
mysqli_close($conn); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?

---

您应该了解您可以通过哪些方式

下面是帮助您学习ajax的其他基础教程







既然您没有清楚地解释这个问题，我将做一个一般性的假设，并给您两个关于如何使用ajax的答案

1.AJAX加载
假设您的HTML结构是

HTML


PHP


myphp.php

//获取表中X，Y坐标的行数
而（$row=mysqli_fetch_assoc（$coord_result））{
//命名X，Y值
$x_pos=$row['x_coord']；
$y_pos=$row['y_coord']；
//在X，Y坐标处绘制一个带DIV的长方体
$html=“箱号”；
} 
//创建一个JSON
echo$\u GET['callback'].'（“.json_encode（$html）。”）；
post:“GET”，
=
键入：“GET”，
怎么样？它没有给我任何结果您的php脚本必须回显一个结果才能被done回调接收。你的一个警报没有响吗？你仍然面临这个问题！！！我的答案有用吗？我更新了我的代码，你可以在上面看到。我在组合JQuery切换函数和使用AJAX调用我的PHP脚本时遇到了问题。这解决了您的问题吗？很抱歉，我会尝试一下，并尽快通知您。谢谢没问题，慢慢来：）嘿，我更新了我的代码，如你所见。当我单击“.desk\u box”DIV时，它显示了以下错误：注意：未定义的索引：第23行C:\webroot\display\u station.php中的回调（“这就是我进行json\u编码的地方……基本上我想将click/toggle函数与php脚本的AJAX调用结合起来”。@hites这是指向新打开帖子的链接：
echo "<p>THIS IS TEST FOR DEMO AJAX LOAD</p>"

//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){    
//naming X,Y values
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];


//draw a box with a DIV at its X,Y coord     
echo "<div id='desk_box' style='style:absolute;
                                    left: " . $x_pos. " px;
                                    top:  " . $y_pos. " px;'>box number</div>";
    } 

<div id="map_size" align="center"></div>

 $(document).ready(function(){

   $.ajax({url:"myphp.php",success:function(result){
       $("#map_size").html(result);
   }});
})

//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){    
//naming X,Y values
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];


//draw a box with a DIV at its X,Y coord     
$html = "<div id='desk_box' style='style:absolute;
                                    left: " . $x_pos. " px;
                                    top:  " . $y_pos. " px;'>box number</div>";
    } 
 //create a JSON 
  echo $_GET['callback'] . '(' . json_encode($html ) . ')';