如何显示ajax数据到while循环?

时间:2019-10-31 04:02:42

标签: php jquery ajax while-loop

我已经在while循环中获取了一些汽车品牌名称,然后通过使用“ brand id”作为外键为每个while循环中的汽车名称选择菜单。然后,我想在每次有人更改下拉选择选项时在框中显示汽车名称。这是我的代码如下:

$query = "SELECT * FROM brands";
$result = $db->query($query);

// Outer while loop
while($row = $result->fetch(PDO::FETCH_OBJ)){
    $brand_id = $row->id;
    ?>

    <div id="result"></div>  <!-- The Ajax result will be shown here -->

    <div><?php echo $row->brand_name ?></div>
    <?php

    $query2 = "SELECT * FROM cars WHERE brand_id = ?";
    $result2 = $db->prepare($query);
    $result2->execute(array($brand_id));

    <select name="car" id="car">
       // Inner while loop
       while($row2 = $result2->fetch(PDO::FETCH_OBJ)){
          ?>
          <option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
          <?php
        }  // Closing Inner while loop
    ?>
    </select>

        <!-- Ajax -->
        <script>
            $(document).ready(function(){

                $('#car').change(function(e){
                    e.preventDefault();
                    var car = $(this).val();
                    $.ajax({
                        url: "ajax.php",
                        type: "post",
                        data: {car: car},
                        success: function(data){
                            $('#result').html(data);
                        }
                    });
                });

            });
        </script>
     <?php
      }  // Closing outer while loop

在ajax.php中,我编写了以下代码以呼应汽车名称

$carName = $_POST['car'];
echo $carName;

但是问题是-它只对第一个外部循环的第一个内部循环内选择的第一个选项执行。我的意思是,ajax代码仅在两个循环的第一次迭代中运行。

我还尝试通过添加“品牌ID”来使选择菜单和结果div变得唯一:

<div id="result<?php echo $brand_id ?>"></div>

<select name="car" id="car<?php echo $brand_id ?>">
    <option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
</select>

以及如下所示的ajax:

       $('#car<?php echo $brand_id ?>').change(function(e){
            e.preventDefault();
            var car = $(this).val();
            $.ajax({
                url: "ajax.php",
                type: "post",
                data: {car: car},
                success: function(data){
                    $('#result<?php echo $brand_id ?>').html(data);
                }
        });

但是没有用。请提出您最好的解决方案。谢谢。

3 个答案:

答案 0 :(得分:0)

select和ajax代码应该不在while循环中。只需查看下面的代码

<?php $query = "SELECT * FROM brands";
$result = $db->query($query);

// Outer while loop
while($row = $result->fetch(PDO::FETCH_OBJ)){
    $brand_id = $row->id;
    ?>

    <div id="result"></div>  <!-- The Ajax result will be shown here -->

    <div><?php echo $row->brand_name ?></div>
    <?php

    $query2 = "SELECT * FROM cars WHERE brand_id = ?";
    $result2 = $db->prepare($query);
    $result2->execute(array($brand_id)); ?>

    <select name="car" id="car">

        <?
       // Inner while loop
       while($row2 = $result2->fetch(PDO::FETCH_OBJ)){
          ?>
          <option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
          <?php
        }  // Closing Inner while loop
    ?>
    </select>

        <!-- Ajax -->
        <script>
            $(document).ready(function(){

                $('#car').change(function(e){
                    e.preventDefault();
                    var car = $(this).val();
                    $.ajax({
                        url: "ajax.php",
                        type: "post",
                        data: {car: car},
                        success: function(data){
                            $('#result').html(data);
                        }
                    });
                });

            });
        </script>
     <?php
      }  // Closing outer while loop

      ?>


``

答案 1 :(得分:0)

尝试我的代码

attr(dt, "tzone")
[1] "GMT"

attr(dt, "tzone") <- "Australia/Sydney" # convert to intended tz

答案 2 :(得分:0)

您无需在while循环中调用ajax()。 您只需在

上致电 .change()
<select name="car" onchange="getCar(this.value)"> 



<script type="text/javascript">
    function getCar(car) {            
        $.ajax({
            url: "ajax.php",
            type: "post",
            data: {car: car},
            success: function(data){
                $('#result').html('');
                $('#result').html(data);
            }
        });
    }
</script>


<div id="result"></div>
相关问题