Question

任何人都可以帮我解决这个问题我想用ajax填充下拉列表。当我在数据库中插入数据时，我希望它在select选项上显示而不刷新。这个下拉列表不是基于其他下拉列表。没有其他下拉列表。只有一次下拉。

HTML

 <select name="id" id="id"></select>

的jQuery

<script type="text/javascript">
    function bedrooms(){
        $('#id').empty();
        $('#id').append("<option>loading........</option>");
        $.ajax({
            type:"POST",
            url:"checking_database.php",
            contentType:"json",
            success:function(data){
                $('#id').empty();
                $.each(data,function(i,item){
                    $('#id').append('<option>"'+data[i].number_of_bedrooms+'"</option>');
                });
            },
            complete:function(){
            }
        });
    }
    $(document).ready(function(){
        bedrooms();
    });
</script>

checking_database.php

<?php
$data = array();
$con=mysqli_connect("localhost","root","","price");   
$query = mysqli_query($con,"select * from bedroom");
if(mysqli_num_rows($query)){
    while($row = mysqli_fetch_array($query)){
        $data[] = array("number_of_bedrooms" => $row['number_of_bedrooms']); 
    };
    header('Content-type: application/json');
    echo json_encode($data);
}
?>

输出

必需输出：将数据显示为选项而不进行刷新。

任何人都可以告诉我如何解决这个问题的答案。我正在学习阶段的ajax和php。我也谷歌关于它，但我发现相互依赖的下拉列表。谢谢你

Answer 1

var last_bedroom_data
function bedrooms(){
    if(!last_bedroom_data){
        $('#id').empty();
        $('#id').append("<option>loading........</option>");
    }
    $.ajax({
        type:"POST",
        url:"checking_database.php",
        contentType:"json",
        success:function(data){
            if(last_bedroom_data==JSON.stringify(data)) // data is the same
                return; // skip rendering of html
            updateBedroomSelect(data);
            last_bedroom_data = JSON.stringify(data);
        },
        complete:function(){
        }
    });
}
function updateBedroomSelect(data){
    $('#id').empty();
    $.each(data,function(i,item){
       $('#id').append('<option>"'+data[i].number_of_bedrooms+'"</option>');
    });
}
$(document).ready(function(){
    bedrooms();
    setInterval(bedrooms,3000);
});

使用ajax填充下拉列表的优雅方式，无需重新加载

1 个答案: