如何使用AJAX / JQuery调用多个PHP脚本？

Question

I am new with AJAX and JQuery. I am trying to use it to call two PHP scripts. I found some examples online but just to call functions. I am just trying to call the scripts so it will load everything on my main PHP file that will then be display on the screen the results withouth refreshing the page.

Here is the fiddle example, it works if I put all my PHP scripts in one file : http://jsfiddle.net/vw4w3ay5/

thanks in advance, your help is very much appreciated!

main_php file (where I want to call my other PHP scripts):

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

<script type="text/javascript">

    /*I WANT TO CALL THE TWO SCRIPTS BEFORE EXECUTE THE FUNCTION BELOW*/

                $(".desk_box").click( function() {
             $(".station_info").hide();   // to hide all the others.
                 $("#station_info"+ $(this).attr('data') ).show();
                    });


</script>

display_desk.php (Script I want to call):

<?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); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?

?>

display_stationinfo.php(second script I want to call):

    <?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); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?

?>

Answer 1

What about? :

<div id="map_size" align="center">
<?php
echo "<script>";
include "display_desk.php";
include "display_stationinfo.php";
echo "</script>";
?>
<script type="text/javascript">

    /*I WANT TO CALL THE TWO SCRIPTS BEFORE EXECUTE THE FUNCTION BELOW*/

                $(".desk_box").click( function() {
             $(".station_info").hide();   // to hide all the others.
                 $("#station_info"+ $(this).attr('data') ).show();
                    });


</script>

To be sure add $(document).ready(function(){

});

/ EDIT / Hum you want to use Ajax . did you try with :

$.post("yourURL.php",function(html){
    /*here what you want to do*/
    /*return of your script in html*/
});