使用ajax的多个数据在下拉列表中,json不起作用


Multiple Data In Dropdown using ajax, json not working

我正在尝试从数据库中提取数据,如果批号在数据库中只有一条记录,下面的代码运行良好,并显示批号的下拉列表,但当我针对同一批号添加更多库存时,它停止显示批号的下降,另一方面,如果我在没有json的情况下执行相同的代码,它会显示所有的批号,但我想用json来处理这个问题,因为我还必须从db中提取一些其他数据,我将在其他div中显示这些数据,请帮我做错事。

JQuery/Ajax

<script>
    function getBatch(id) {
        var product_id = jQuery('#product'+id).val();
        jQuery.ajax({
            type: 'POST',
            url: 'get_Batch.php',
            data: { product_id: product_id },
            dataType : 'JSON',
            success: function(data) {
                jQuery('#batch'+id).html(data.batch_option);
                jQuery('#available_qty'+id).val(data.avaliable_quantity);
            }
        });
    }
</script>

PHP

<?php
include('includes/config.php');
if(isset($_POST['product_id'])) :
    $product_id = $_POST['product_id'];
    $get_batch = mysqli_query($conn, "Select * from products JOIN products_stock ON products.p_id='$product_id' AND products.p_id=products_stock.p_id");
    if(mysqli_num_rows($get_batch) > 0) :
        header('Content-Type: application/json');
        while($batch = mysqli_fetch_object($get_batch)) :
            $data = [
                        'batch_option'          =>  "<option value=".$batch -> batch_no."> 
                                                        ".$batch -> batch_no."
                                                    </option>",
                        'avaliable_quantity'    =>  $batch -> p_available
                    ];
            echo json_encode($data);
        endwhile;
    else :
        header('Content-Type: application/json');
        $data = [
                    'batch_option'  =>  "<option value='No batch found'> No batch found </option>",
                    'avaliable_quantity'    =>  'Not avaliable'
                ];
        echo json_encode($data);
    endif;
endif;

?>

如果我喜欢这样,它会在下拉中显示一个批号的所有记录

<?php
include('includes/config.php');
if(isset($_POST['product_id'])) :
    $product_id = $_POST['product_id'];
    $get_batch = mysqli_query($conn, "Select * from products JOIN products_stock ON products.p_id='$product_id' AND products.p_id=products_stock.p_id");
    if(mysqli_num_rows($get_batch) > 0) :
        while($batch = mysqli_fetch_object($get_batch)) :
        ?> <option value="<?php echo $batch -> id; ?>"><?php echo $batch -> id; ?></option> <?php
        endwhile;
    endif;
endif;

?>

更改while循环,以便在其外部定义$data,并将结果附加到循环中的$data

header('Content-Type: application/json');
$data = []; //will store results
while($batch = mysqli_fetch_object($get_batch)) :
    $data[] = [...];    //add next result       
endwhile;
echo json_encode($data); //encode and return all results.

在Javascript中,您还必须更改HTML的填充方式。您当前的代码只是将data.batch_optiondata.avaliable_quantity添加到文档中。但是,一旦您有了几个结果,data将是一个数组,因此您将不必循环遍历其成员并将每个成员添加到文档中。

success: function(data) {
    //loop through each result in data
    data.forEach(function(result){
        var opt = result.batch_option;
        var qty = result.avaliable_quantity;
        //Todo: add opt and qty to the right DOM elements
    });
}