javascript - 从动态表输入插入到 mySQL

Question

我有一个动态表格输入表单，您可以根据需要添加/删除行。作为一个没有太多经验的人，我一直困惑于如何将这些输入保存到 mySQL 数据库中。

这是 input.php 的样子

<form action="insert.php" method="post">
<div class="box-body no-padding">
  <table class="table table-bordered">
    <tr>
      <th>Item</th>
      <th>#</th>
      <th>Qty</th>
      <th>Price</th>
      <th>Total</th>
      <th></th>
    </tr>

    <tr>
      <td><input type="text" id="item" name="item"></td>
      <td><input type="text" id="no" name="no"disabled></td>
      <td><input type="number" id="qty" name="qty"></td>
      <td><input type="number" id="price" name="price"></td>
      <td><input type="number" id="total" name ="total" disabled></td>
      <td><button type="button" class="remove-row"><i class="fa fa-trash"></i></button></td>
    </tr>
  </table>
</div>

<div class="box-body">
  <div class="button-group">
    <a href="javascript:void(0)" class="add-row"><i class="fa fa-plus-circle"></i> Add Item</a>
  </div>
</div>

<div class="box-footer">
  <div class="button-group pull-right">
    <button type="submit" class="btn btn-default">Cancel</button>
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</div>
</form>

这是我用来添加/删除行的 JS (jQuery) 代码

<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function(){
    $(document).ready(function(){
      $(".add-row").on('click', function(){
        var item = "<td><input type='text' id='item'></td>";
        var no = "<td><input type='text' id='no' disabled></td>";
        var qty = "<td><input type='number' id='qty'></td>";
        var price = "<td><input type='number' id='price'></td>";
        var total = "<td><input type='number' id='total' disabled></td>";
        var remove_button ="<td><button type='button' class='remove-row'><i class='fa fa-trash'></i></button></td>";

        var markup = "<tr>" + item + no + qty + price + total + remove_button + "</tr>";
        $("table").append(markup);
      });

      $(".table").on('click', '.remove-row', function(){
        $(this).closest("tr").remove();
      });
    });
  });    
</script>

页面如下所示:

input page

插入.php

<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("db", $connection);
if(isset($_POST['submit'])){ 
  $item = $_POST['item'];
  $no = $_POST['no'];
  $qty = $_POST['qty'];
  $price = $_POST['price'];

  $query = mysql_query("insert into table(item, no, qty, price) values ('$item', '$no', '$qty', '$price')");
}

?>

我知道 insert.php 不适用于我的情况，因为我需要将其作为数组输入。事情是:
1.我不知道如何实现前端，所以当我点击“添加项目”时不会有重复的id/名称
2.我不知道如何将数组(我不知道创建)插入到mysql中。

我想知道如何在我的情况下实现保存按钮。感谢您的帮助。

Answer 1

首先，请研究 mysql_* 函数。不应再使用它们，因为它们可能导致 SQL 注入(inject)安全问题。使用 mysqli_* 代替或使用 PDO 等数据库层。

其次，如果您将“[]”附加到输入标记名称，那么 PHP 将以数组形式接收数据，您可以在 insert.php 中循环遍历它。

<tr>
  <td><input type="text" id="item" name="item[]"></td>
  <td><input type="text" id="no" name="no[]" disabled></td>
  <td><input type="number" id="qty" name="qty[]"></td>
  <td><input type="number" id="price" name="price[]"></td>
  <td><input type="number" id="total" name="total[]" disabled></td>
  <td><button type="button" class="remove-row"><i class="fa fa-trash"></i></button></td>
</tr>

并确保您的 javascript 代码还添加了 name 属性:

$(".add-row").on('click', function(){
    var item = "<td><input type='text' id='item' name='item[]'></td>";
    var no = "<td><input type='text' id='no' name='no[]' disabled></td>";
    var qty = "<td><input type='number' id='qty' name='qty[]'></td>";
    var price = "<td><input type='number' id='price' name='price[]'></td>";
    var total = "<td><input type='number' id='total' name='total[]' disabled></td>";
    var remove_button ="<td><button type='button' class='remove-row'><i class='fa fa-trash'></i></button></td>";

    var markup = "<tr>" + item + no + qty + price + total + remove_button + "</tr>";
    $("table").append(markup);
  });

然后在 PHP 中你可以:

<?php
$connection = mysqli_connect("localhost", "root", "", "db");
if(isset($_POST['submit'])){
    $rowCount = count($_POST['item']);
    // Note that this assumes all the variables will correctly be submitted as arrays of the same length. For completeness and robustness you could add a !empty check for each value.
    for ($i = 0; $i < $rowCount; $i++) {
        $item = $_POST['item'][$i];
        $no = $_POST['no'][$i];
        $qty = $_POST['qty'][$i];
        $price = $_POST['price'][$i];

        $query = mysqli_query($connection, "insert into `table` (item, no, qty, price) values ('$item', '$no', '$qty', '$price')");
    }
}

？>