使用 PHP 和 Ajax 从 MySQL 检索数据到动态输入

Question

我正在构建一些应用程序，该应用程序使用 PHP 和 Ajax 将数据从 MySql 数据库中检索到动态输入中，当我为此输入检索数据时，它始终显示在下一个但它假设显示在我提到的 div 中在 Ajax 代码中。

这张图片将清楚地解释我的问题对不起我的语言英语不是我的第一语言。

我的html代码：

                  <div class="form-group">
                    <label class="control-label col-lg-4"></label>
                      <div class="col-lg-4">
                        <div class="box">
                          <header>
                            <h5>تفاصيل الطلب</h5>
                            </header>
                            <div class="body">
                              <div class="form-group">
                              <label class="control-label col-lg-2">الصنف</label>
                                  <div class="col-lg-10">
                                      <select id="itemname" name="itemname[]" class="form-control">
                                        <option disabled selected>اختر الصنف</option>
                                        <?php echo getValues($pdo); ?>
                                      </select>
                                  </div>
                              </div>
                              <div class="form-group">
                                <label class="control-label col-lg-2">السعر</label>
                                <div class="col-lg-10">
                                  <input type="text" id="price" name="price[]" placeholder="-" readonly class="form-control">
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="control-label col-lg-2">الكمية</label>
                                <div class="col-lg-10">
                                  <input class="form-control" type="text" name="quantity[]" id="quantity" value="0" min="1">
                                </div>
                              </div>
                            </div>
                            </div>
                      </div>
                    </div>

PHP 文件：

<?php    
    require 'DBConnection.php';
    $code='';
    if(isset($_POST["code"])){
        $id = $_POST["code"];
        $get_c = $pdo->prepare("SELECT * FROM all_menu WHERE `item_name` = '".$id."'");
        $get_c->execute(); 
        while ($row = $get_c->fetch()) {
            $code .= $row['price'];
        }
        echo $code;
    }
?>

JQuery 代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var i=1;
    $('#add').click(function(){
    i++;
    $('#append').append('<div class="form-group"><label class="control-label col-lg-4"></label><div class="col-lg-4"><div class="box"><header><h5>تفاصيل الطلب</h5></header><div class="body"><div class="form-group"><label class="control-label col-lg-2">الصنف</label><div class="col-lg-10"><select id="itemname'+i+'" name="itemname[]" class="form-control"><option disabled selected>اختر الصنف</option><?php echo getValues($pdo); ?></select></div></div><div class="form-group"><label class="control-label col-lg-2">السعر</label><div class="col-lg-10"><input type="text" id="price'+i+'" name="price[]" placeholder="-" readonly class="form-control"></div></div><div class="form-group"><label class="control-label col-lg-2">الكمية</label><div class="col-lg-10"><input class="form-control" type="text" name="quantity[]" id="quantity" value="0" min="1"></div></div></div></div></div></div>');
    $('#itemname'+i+'').change(function(){
      var code = $(this).val();  
       $.ajax({
          type: 'POST',
          url: 'pages/GetPrice.php',
          data:{code:code},
          success: function(data){
            document.getElementById("price"+i+"").value = data;
          },
          error: function (jqXHR, textStatus, errorThrown){ 
            alert(errorThrown);
          }
       });
    });
    });
});
</script>

Answer 1

只要您放弃总是尝试仅按 ID 选择元素的“新手习惯”，这样的事情就会变得容易得多。

唯一在您附加到每个新选择元素的所有这些单独的change 处理函数中不同的是，您想要将输出写入的价格字段的 ID。但是您不需要需要通过 ID 选择该元素，还有其他方法 - 在这种情况下，您应该“导航”到它，基于它在 DOM 中的位置，相对于它的对应选择字段。

一旦您这样做了，就不再需要 X 个单独的处理函数来处理 X 个单独的选择字段 - 而只需要一个单独的处理函数。如果您使用event delegation 进行设置，那么您也无需再将其显式添加到您创建的每个新选择元素中。

事件委托部分是这样的：

$(document).on('change', '[name="itemname[]"]', function() { ... } );

您执行此操作一次，它将处理文档中任何位置带有name="itemname[]" 的所有元素的更改事件 - 已经存在的，以及 未来以后才会添加。

至于查找匹配价格字段的部分 - 为此，您只需从选择字段向上导航到两者的共同祖先 - 在这种情况下，.body 包装器元素应该是合适的 - 然后你查找该元素内部的价格字段。

可以使用$(this) 访问事件发生的选择字段，并且要向上查找特定的祖先元素，jQuery 提供了parents 方法 - 所以要访问相应的价格字段，您可以使用类似这个：

$(this).parents('.body').find('[name="price[]"]').val(data);  

由于这里不再涉及元素 ID，并且所有元素选择都是基于其他因素发生的，例如 name 属性和 DOM 中的位置，因此您可以完全在元素中不使用任何 ...'+i+'... 内容创建。根本不要给这些元素任何 ID。