PHP和AJAX：如何在PHP while循环中显示json_encode数据？

Question

I am very new to using AJAX and passing data with json_encode. I have this "aht" button when clicked it will send an AJAX request to my show_aht.php script, which will run a query. I want to save the results and display it to my map.php.

Problem:

In my map.php I have a while loop that outputs square(desk) DIVs with another DIV(station) when clicked that displays content inside of it. Here is the fiddle so you may understand . I want the results of show_aht.php "TIME" to be displayed in the DIVs being produced by my WHILE LOOP in map.php.

How is it possible to do this? I know that AJAX and PHP cannot interact with eachother and thats why I need help. If this can't be done, how else can I display the TIME from show_aht.php to their corresponding usernames on each DIV being output? I have around 200 of them being displayed.

Thanks in advance.

map.php (only showing the last line of the while loop, outputs all DIVs)

//desk DIV
 while(somequery){
    ....
    echo '<div class="' . $class . '" data-rel="' . $id . '" style="left:' . $x_pos . 'px;top:' . $y_pos.'px;">' . $sta_num . '</div>' . "\n";
}//end while

//station DIV
while(some query){
.....
   echo '<div class="station_info_" id="station_info_' . $id . '" style="left:' . $x_pos . 'px;top:'                             .$y_pos . 'px;"><p class="numb">User:' . $user .'<br>Station:' . $hostname . '<br>Pod:' . $sta_num .     '<br>Section:' . $sec_name . '<br>State:' . $state .'<br></p></div>' . "\n";
}//end while

map.php (AJAX part)

<div id="aht"><!--aht button--> 
    <button id="aht_button">AHT</button>    
</div><!--aht button-->

<script type="text/javascript">
            $(document).ready(function() {
                $('#aht').click(function(){
                    $.ajax({
                    type:"POST",
                    url : "show_aht.php",
                    data: , // pass data here
                    dataType: 'json',
                    success : function(data){

                    }//end success
                });//end ajax
              });//end click
            });//end rdy
        </script>

show_aht.php (showing the loop and part I where I want the data to be returned)

foreach($memo_data as $v){
        foreach($user_data as $m){
            if($v['memo_code'] == $m){
                echo " User: " .$m. " Time: " . $v['avg_handle_time'] . "<br>";
            }
            elseif( $v['memo_code'] != $m){
                echo  "User: " . $m . " Time: N/A <br>";
            }
        }
    }

Answer 1

Don't output anything except one valid json string. In your case you do that by replacing the echo 's with building an array (or object...) and output that at the very end:

For example:

$data = array();
foreach($memo_data as $v){
        foreach($user_data as $m){
            if($v['memo_code'] == $m){
                $data[] = " User: " .$m. " Time: " . $v['avg_handle_time'] . "<br>";
            }
            elseif( $v['memo_code'] != $m){
                $data[] = "User: " . $m . " Time: N/A <br>";
            }
        }
    }

// Output your json string
echo json_encode($data);

Note that I have simply replaced your echos with an assignment but you could also add arrays in your array to return just the data parts and process that afterwards in javascript.

For example (this would depend a bit on your exact data structure...):

...
$data[] = array($m, $v['avg_handle_time']);
...

Answer 2

change show_aht.php to

$res=array();
foreach($memo_data as $v){
        foreach($user_data as $m){
            if($v['memo_code'] == $m){
                $res[]= " User: " .$m. " Time: " . $v['avg_handle_time'];
            }
            elseif( $v['memo_code'] != $m){
                $res[]=  "User: " . $m . " Time: N/A <br>";
            }
        }
    }

echo json_encode($res);

and map.php ajax to

$(document).ready(function() {
                $('#aht').click(function(){
                    $.ajax({
                    type:"POST",
                    url : "show_aht.php",
                    data: , // pass data here
                    dataType: 'json',
                    success : function(data){
                      for(i=0;i<data.length;i++){
                      //append data[i] to div
                      }
                    }//end success
                });//end ajax
              });//end click
            });//end rdy