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

结果中有2个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){...});

使用不同的json数据填充不同的选择框

1 个答案: