다른 json 데이터로 다른 선택 상자 채우기

Question

3 개의 다른 선택 상자가 있습니다. 두 번째 및 세 번째 선택 상자는 첫 번째 선택 상자 값에 따라 ajax + php을 통해 채워집니다. 하지만 그 반응은 내가 예상 한 바가 아니다. 그것은 오류 기능을 보여줍니다. 내가 콘솔에서 확인할 때 json 형식으로 데이터베이스에서 데이터를 읽는 데 필요한 promlem이 없습니다. 하지만 나는이 데이터를 html로 화면에 표시 할 수 없습니다.

HTML :

<table> 
    <tr> 
     <td valign="middle" align="center"> 
      <label id="fieldOfBusinessLabel" for="fieldOfBusinessText">Field of Business</label> 
     </td> 
     <td valign="middle" align="center"> 
      <select id="fieldOfBusinessSelectBox" class="selectBox" name="fieldOfBusinessSelectBox"> 
       <option value="">--select--</option> 
       <?php 
        $result=mysqli_query($db,'SELECT * FROM field_of_business'); 
        while($row=mysqli_fetch_assoc($result)) { 
         echo '<option value="'.$row["FobID"].'">'.$row['FobName'].'</option>'; 
        }                  
       ?> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td valign="middle" align="center"> 
      <label id="typeOfProductionLabel" for="typeOfProductionText">Type of Production/Service</label> 
     </td> 
     <td valign="middle" align="center"> 
      <select id="typeOfProductionSelectBox" clas="selectBox" name="typeOfProductionSelectBox"> 
       <option value="">--select--</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td valign="middle" align="center"> 
      <label id="mainProductsLabel" for="mainProductsText">Main Products/Services</label> 
     </td> 
     <td valign="middle" align="center"> 
      <select id="mainProductSelectBox" clas="selectBox" name="mainProductSelectBox"> 
       <option value="">--select--</option> 
      </select> 
     </td> 
    </tr> 
</table> 

JS :

$(document).ready(function(){ 
    $("#fieldOfBusinessSelectBox").change(function(){ 
     var value = $("select#fieldOfBusinessSelectBox option:selected").val(); 
     $.ajax({ 
      type: 'POST', 
      url: 'listData.php', 
      dataType: "json", 
      data:{fobID:value}, 
      success:function(answer){ 
       var data1 = "<option>--select--</option>"; 
       var data2 = "<option>--select--</option>"; 
       $.each(answer, function(i, answer){ 
        data1 += "<option>"+answer.TopsName+"</option>"; 
       }); 
       $.each(answer, function(i, answer){ 
        data2 += "<option>"+answer.MpsName+"</option>"; 
       }); 
       $('#typeOfProductionSelectBox').html(data1); 
       $('#mainProductSelectBox').html(data2); 
      }, 
      error:function(){ 
       alert("An error has occured !"); 
      }   
     }); 
    }); 
}); 

PHP :

<?php 

    include './config.php'; 

    if(strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest'){ 
     die('Wrong request !'); 
    } 
    $fobID = mysqli_real_escape_string($db,$_POST['fobID']);  

    if(isset($_POST['fobID'])){ 
     $stmt1 = $db->prepare("SELECT TopsName FROM type_of_production_service WHERE FobID = ?"); 

     if($stmt1 == "false"){ 
      die('Query error !'.$db->error); 
     } 
     $stmt1->bind_param('i', $fobID); 
     $stmt1->execute(); 
     $result = $stmt1 -> get_result(); 
     $topsName = $result ->fetch_all(MYSQLI_BOTH); 

     echo json_encode($topsName); 

     $stmt2 = $db->prepare("SELECT MpsName FROM main_products_services WHERE FobID = ?"); 

     if($stmt2 == "false"){ 
      die('Query error !'.$db->error); 
     } 
     $stmt2->bind_param('i', $fobID); 
     $stmt2->execute(); 
     $result2 = $stmt2 -> get_result(); 
     $mpsName = $result2 ->fetch_all(MYSQLI_BOTH); 

     echo json_encode($mpsName); 
    } 

    $db->close(); 

Answer 1

당신이이 결과에 문자열을 json_encoded과 디코딩하지 않은 여기 내 시도이다. 사용자 하나 JSON 오브젝트 :
PHP :

echo json_encode(array('mps' => $mpsName, 'tops' => $topsName)); 

JS :

가

answer = $.parseJSON(answer); 
$.each(answer.tops, function(k,v){...}); 
$.each(answer.mps, function(k,v){...});