如何在ajax响应中使用while循环

Question

Here is my ajax

var vn = '*', dataString = 'vehicle_name='+ vn;

  $.ajax({
        type: "POST",
        url: "getDesc.php",
        data: dataString,
        dataType: "json",
        success: function(data){
            if(!data.error && data.success) {
             var vn = data.vehicleName, st = data.serviceType, o = data.others, rn = data.ref_no, rd = data.ref_date, rt = data.ref_type;
             var myTable1 ='<fieldset>' +
                 '<legend>Dashboard</legend><br>' +
                    '<table border="1" width="650">' +
                    '<tr bgcolor=#c0c0c0>' +
                            '<td width=100 align="center"><font face="helvetica"><b>Vehicle Name</b></font></td>' +
                            '<td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td>' +
                            '<td width=80 align="center"><font face="helvetica"><b>Others</b></font></td>' +
                            '<td width=100 align="center"><font face="helvetica"><b>Reference No.</b></font></td>' +
                            '<td width=80 align="center"><font face="helvetica"><b>Reference Date</b></font></td>' +
                            '<td width=80 align="center"><font face="helvetica"><b>Reference Type</b></font></td>' +
                        '</tr>' +

                        '<tr bgcolor=#c0c0c0>' +
                            '<td align=center>'+vn+'</td>' +
                            '<td align=center>'+st+'</td>' +
                            '<td align=center>'+o+'</td>' +
                            '<td align=center>'+rn+'</td>' +
                            '<td align=center>'+rd+'</td>' +
                            '<td align=center>'+rt+'</td>' +
                        '</tr>' +
                    '</table>' +
                 '</fieldset>';
                  $('#tabs-4').append(myTable1);

            } else {
                alert(data.errorMsg);
            }
        }
        });

Here is my PHP

<?PHP
include("db.classes.php");
$g = new DB();
$g->connection();

        if($_POST)
            {
                $vehicleName = $g->clean($_POST["vehicle_name"],1);

                $g->getAllDesc($vehicleName);
            }
$g->close();
 ?>

Here is my db.classes

public function getAllDesc($vehicleName)
    {
        header('Content-type: application/json');
        $sql = "select vehicle_name, service_type, others, ref_no, ref_date, ref_type from vehicle_services";

        $result = mysql_query($sql) or die(json_encode(array('error' => 0,'errorMsg' => "MySQL query failed.")));

        while($row = mysql_fetch_array($result))
        {

            $output[] = array(
                'success' => 1,
                'vehicleName' => $row["vehicle_name"],
                'serviceType' => $row["service_type"],
                'others' => $row["others"],
                'ref_no' => $row["ref_no"],
                'ref_date' => $row["ref_date"],
                'ref_type' => $row["ref_type"]                 
                );

                echo json_encode($output);
        }

    }

And here is the response I get

[{"success":1,"vehicleName":"JHE699","serviceType":"CHANGE TIRE","others":"","ref_no":"14010001","ref_date":"2014-04-10","ref_type":"PRRIAR"}][{"success":1,"vehicleName":"JHE699","serviceType":"CHANGE TIRE","others":"","ref_no":"14010001","ref_date":"2014-04-10","ref_type":"PRRIAR"},{"success":1,"vehicleName":"TOYOTA 86","serviceType":"TRUCK","others":"","ref_no":"1","ref_date":"2014-05-07","ref_type":"RR"}]

My first row gets duplicated and the table does not display. How do i pass the array so that my table would display?

Answer 1

The reason you are not getting a printed table is because your JSON is invalid.

JSON responses are usually one JSON object, but in your case your while loop occurs 3 times, and you get 3 JSON objects. Your jQuery doesn't like the response so will error.

I suggest that you properly instantiate the $output array above the while loop ($output = array()), then, instead of directly echoing the array, return the whole $output array after the while loop (return $output). Then you can use:

$array = $g->getAllDesc($vehicleName); 
echo json_encode($array);. 

You might want to check that your database does not have a double up of the same vehicle.