如何從php獲取多個數據並將其存儲在使用ajax的選擇選項中

Question

我有一個選擇選項，從中可以選擇從php腳本獲取的酒店名稱。

然后，我還有另一個選擇選項，該選項顯示基於從第一個選擇選項中選擇的酒店的房間類型。

當我在ajax的幫助下選擇一家酒店時，我的第二選擇選項僅獲得一種房型，而在我的餐桌上，同一家酒店則有多種房型。

我的php代碼獲取房間類型。

<?php 
      include('mysql.php'); 
      $h_id = $_POST['hotel_id'];
      $result = mysql_query("SELECT * FROM room_type WHERE hotel_id = '$h_id'"); 
      while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
            $type_name = $row['type_name'];
            $type_id = $row['roomtype_id'];
            echo $type_name.",".$type_id;
      }


      exit();   
?>

javascript：

 jQuery(document).ready(function($){ $('#hotel_list').change(function(){ $.ajax({ type:'post', url:'roomtype_fetch.php', data: 'hotel_id='+ $(this).val(), success: function(value){ var data = value.split(","); var type_name =data[0]; var type_id =data[1]; $("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>"); } }); }); }); 

第一個選擇html及其php以獲得酒店名稱。

<select class="form-control" name="hotel_list" id="hotel_list" onchange="cal()">
    <option>--Select--</option>
    <?php
         $query2 = mysql_query("SELECT * FROM hotel") or die("the query cannot be completed at this moment");
         if(mysql_num_rows($query2) <1) {
    ?>
    <option>No Hotel Found!</option>
    <?php
         }
         while($row = mysql_fetch_array($query2, MYSQL_ASSOC)){
              $hotel_name = $row['hotel_name'];
              $hotel_id_1 = $row['hotel_id'];
    ?>
    <option value="<?php echo $hotel_id_1; ?>"><?php echo $hotel_name; ?></option>
    <?php
        }
    ?>
</select>

第二選擇html代碼：

<select class="form-control" name="roomtype_list" id="roomtype_list">
    <option>--Select--</option>                     
</select>

任何類型的幫助將不勝感激。

Answer 1

您不能直接執行value.split（“，”），因為您的php輸出如下所示：

name1,id1name2,id2name3,id3

如果將行更改為：echo不會在末尾添加新行：

echo $type_name.",".$type_id,"\n";

這將為您提供如下輸出：

name1,id1
name2,id2
name3,id3

然后您可以用“ \\ n”拆分以得到一個行數組，然后用“，”分隔名稱和ID：

var data = value.split(",");
data.forEach(function(line){
    var type_values = line.split(",");
    var type_name = type_values[0];
    var type_id = type_values[1];
    $("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>");
}

但是無論如何，我認為最好的選擇是更改您的PHP以返回JSON：

$result = array();
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
    $result[] = $row;
}
echo json_encode($result);

然后執行以下操作：

var data = JSON.parse(value);
$("#roomtype_list").empty();
data.forEach(function(type){
    $("#roomtype_list").append("<option value="+type.roomtype_id+">"+type.type_name+"</option>");
});

Answer 2

第一件事是，生成類型的php循環給出了錯誤的輸出：

  while($row = mysql_fetch_array($result, MYSQL_ASSOC)){ $type_name = $row['type_name']; $type_id = $row['roomtype_id']; echo $type_name.",".$type_id; } 

那給你這樣的東西：

name1,type1name2,type2name3,type3...

您應該添加一個; 或其他類似的分隔符，因此請將回聲線更改為：

echo $type_name.",".$type_id.",";

那會給你這樣的輸出：

name1,type1;name2,type2;name3,type3...

第二件事是，您必須通過接收的類型與jquery循環。 您將接收到的字符串拆分為一個數組：

var data = value.split(",");

..因此您應該在javascript成功函數中執行以下操作：

...
success: function(value){
        var data = value.split(";");
        //split all types first with ";"
        $.each(data, function() {
            var type = $(this).split(",");
            //then split the type in name and id
            var type_name = type[0];
            var type_id = type[1];
            //add every type to roomtype_list
            $("#roomtype_list").html("<option value="+type_id+">"+type_name+"</option>");
        });
}
...

說明：首先使用分隔符";"分割所有類型";" 然后用","分割名稱和ID中的類型。 我希望這有幫助。