使用jquery和ajax调用一个php文件加载数据到多个div

Question

感谢您点击这个问题，我正在尝试添加一个新功能，每当我点击一个按钮时，它都会将多行项目加载到 div。

这是我的 div

代码

<div id="add_items_row"></div>

这是按钮

<div class="col-sm-2 add_items">
   <button 
    type="button" id="add_items" name="add_items" class="btn btn-primary" 
    onclick="add_items()"> <?php echo $add_items_btn; ?>
   </button>
 </div>

这是函数

function add_items() {
  if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
  } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          txt = xmlhttp.responseText;
          $(txt).clone().prependTo( "#add_items_row");
      }
  }
  xmlhttp.open("GET", "../php/add_items.php");
  xmlhttp.send();
}

这是我的 add_items.php 文件中的代码

    $sql = mysqli_query($conn, "SELECT id, item_name, item_qty FROM inventory WHERE active = 1");
    while($row = mysqli_fetch_array($sql)){
      $item_id = $row['id'];
      $item_name = $row['item_name'];
      $item_qty = $row['item_qty'];
    }

    $display_row = '
      <div class="col-md-4">
         <input type="hidden" class="small form-control" name="item_id[]" value="'.$item_id .'">
         <input type="text" class="small form-control" name="item_name[] readonly value="'.$item_name .'">
         <input type="text" class="small form-control" name="item_qty[] readonly value="'.$item_qty .'">
      </div>
   ';

   echo $display_row;

SQL 语句在我的数据库中有效，它 returns 多行，但是在页面本身上它只向 add_items_row div 添加了一项。

此外，当我打开 add_items.php 页面时，它也只显示一项。

我怀疑问题出在我的 add_items.php 文件或函数中。感谢那些读过我的问题的人，我是编程新手，任何见解或建议都会帮助我。

Answer 1

我将代码更改为此，项目显示出来了。

$sql = mysqli_query($conn, "SELECT id, item_name, item_qty FROM inventory WHERE active = 1");
$display_row = '';
while ($row = mysqli_fetch_array($sql)) {
    $item_id = $row['id'];
    $item_name = $row['item_name'];
    $item_qty = $row['item_qty'];

    $display_row .= '
      <div class="col-md-4">
         <input type="hidden" class="small form-control" name="item_id[]" value="' . $item_id . '">
         <input type="text" class="small form-control" name="item_name[] readonly value="' . $item_name . '">
         <input type="text" class="small form-control" name="item_qty[] readonly value="' . $item_qty . '">
      </div>
    ';
}

echo $display_row;

使用jquery和ajax调用一个php文件加载数据到多个div

Using jquery and ajax to call a php file to load data into multiple divs

html

javascript

php

mysqli