如何在while循环中显示ajax数据？答案

【问题标题】：How to show ajax data into while loop?如何在while循环中显示ajax数据？
【发布时间】：2019-10-31 04:02:42
【问题描述】：

我在一个 while 循环中获取了一些汽车品牌名称，然后对于每个品牌名称，我使用“品牌 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);
                }
        });

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

【问题讨论】：

您的 JavaScript 控制台中是否有任何错误？在 ID 中添加文本绝对是可行的方法（页面上不能有两个具有相同 ID 的元素）
URL 应该是ajax.php 而不是ajax？只是你可以尝试的东西
不，没有js错误。

标签： php jquery ajax while-loop

【解决方案1】：

试试我的代码

$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<?php echo $brand_id;?>"></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));

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

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

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

            });
        </script>

        <?php
      }
    }

【讨论】：

【解决方案2】：

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

      ?>


``

【讨论】：

【解决方案3】：

您不需要在 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>

【讨论】：