如何将购物车中多组div数据提交至SQL数据库？

云原生阿岚

2026-8-25

问题描述

我是PHP入门学习者，现有一段投注购物车代码，想要将购物车div中的多组比赛数据提交至SQL数据库，但当前代码无法实现该功能。请问如何修改代码完成数据提交？若无法使用同名参数传递多组比赛数据，该如何实现批量插入？希望能提供相关示例代码，仅需实现数据提交功能，无需编辑功能。

原代码如下：

<!DOCTYPE html>
<html>
    <head>
      <title>Add Records in Database</title>
    </head>
    <body>
    <?php

        include "dbConn.php"; // Using database connection file here

        if(isset($_POST['submit']))
        {       
            $match = $_POST['match'];
            $selection = $_POST['selection'];
            $odd = $_POST['odd'];
            $totalOdds = $_POST['totalOdds'];
            $stakeAmount = $_POST['stakeAmount'];
            $payout = $_POST['payout'];

            $insert = mysqli_query($db,"INSERT INTO `receipts`(`Match`, `Selection`, `Odd`,  `Total Odds`,   `Stake Amount`, `Payout`) 
                                        VALUES ('$match','$selection','$odd','$totalOdds','$stakeAmount','$payout')");

            if(!$insert)
            {
                echo mysqli_error($db);
            }
            else
            {
                echo "Records added successfully.";
            }
        }

        mysqli_close($db); // Close connection

    ?>
        <div class="cart">
            <div class="title">Bet Slip</div>
            <div id="box" class="boxlit" >
                <form action="" method="post">
                    <div class="box" data-id="4" name="Match">Lanus - Godoy Cruz<div name="selection">Draw</div><div class="crtTotal" name="odd">3.05</div></div>
                    <div class="box" data-id="8" name="Match">Deportivo Pasto - Envigado<div name="selection">Away</div><div class="crtTotal" name="odd">4.70</div></div>
                    <div class="box" data-id="9" name="Match">Union Manabita - Emelec<div name="selection">Home</div><div class="crtTotal" name="odd">8.25</div></div>
                    <div class="box" data-id="12" name="Match">New Jersey Copa - FC Motown II<div name="selection">Home</div><div class="crtTotal" name="odd">3.35</div></div></div>
                    <br>
                    <div>Total Odds: <b id="ct1" name="totalOdds" >475.42</b></div><br>
                    <div>(N$)Stake: <input id="stake" type="number" name="stakeAmount" value="5"> NAD</div><br>
                    <div>Payout: N$ <b id="payout" name="payOut" >2377.10</b></div>
                    <input type="submit" name="submit" value="Bet">
                </form>
            <div class="footer"></div>
        </div>
    </body>
</html>

问题分析

原代码中比赛数据放在<div>标签内，name属性不会被表单提交，表单仅能提交input/select等表单控件的值。
多组比赛数据未以数组形式提交，后端无法识别批量数据。
直接拼接SQL语句存在严重SQL注入风险，必须使用预处理语句规避。

修改方案

1. 前端调整：转为表单控件+数组命名

将每组比赛的信息存入hidden类型的input，并给name属性添加[]后缀，让数据以数组形式提交。同时将总赔率、赔付金额也转为hidden控件，确保数据能被表单正确提交。

2. 后端处理：预处理语句实现批量插入

接收前端提交的数组数据，通过循环拼接批量插入的SQL模板，使用mysqli预处理语句绑定参数，一次性完成多组数据的安全插入。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Add Records in Database</title>
</head>
<body>
<?php
include "dbConn.php"; // 引入数据库连接文件

if(isset($_POST['submit']))
{
    // 接收表单提交的数组数据，为空时设默认值
    $matches = $_POST['match'] ?? [];
    $selections = $_POST['selection'] ?? [];
    $odds = $_POST['odd'] ?? [];
    $totalOdds = $_POST['totalOdds'] ?? 0;
    $stakeAmount = $_POST['stakeAmount'] ?? 0;
    $payout = $_POST['payout'] ?? 0;

    // 检查是否有有效比赛数据
    if(empty($matches)) {
        echo "没有可提交的比赛数据";
        mysqli_close($db);
        exit;
    }

    // 准备批量插入的SQL模板和参数容器
    $sqlTemplate = "INSERT INTO `receipts`(`Match`, `Selection`, `Odd`, `Total Odds`, `Stake Amount`, `Payout`) VALUES ";
    $valuePlaceholders = [];
    $paramTypes = "";
    $params = [];

    // 循环处理每组比赛数据
    foreach($matches as $index => $match) {
        // 过滤空数据，避免无效插入
        if(empty($match) || empty($selections[$index]) || empty($odds[$index])) continue;
        
        // 添加占位符和参数类型
        $valuePlaceholders[] = "(?, ?, ?, ?, ?, ?)";
        $paramTypes .= "ssddds"; // s=字符串，d=浮点数，需匹配数据库字段类型
        
        // 整理参数值
        $params[] = trim($match);
        $params[] = trim($selections[$index]);
        $params[] = floatval($odds[$index]);
        $params[] = floatval($totalOdds);
        $params[] = floatval($stakeAmount);
        $params[] = trim($payout);
    }

    if(empty($valuePlaceholders)) {
        echo "有效比赛数据为空";
        mysqli_close($db);
        exit;
    }

    // 拼接完整SQL语句
    $sql = $sqlTemplate . implode(", ", $valuePlaceholders);
    $stmt = mysqli_prepare($db, $sql);

    // 绑定参数并执行插入
    mysqli_stmt_bind_param($stmt, $paramTypes, ...$params);
    if(mysqli_stmt_execute($stmt)) {
        echo "共成功插入 " . mysqli_stmt_affected_rows($stmt) . " 条记录";
    } else {
        echo "插入失败：" . mysqli_error($db);
    }

    // 关闭预处理语句
    mysqli_stmt_close($stmt);
}

mysqli_close($db); // 关闭数据库连接
?>
<div class="cart">
    <div class="title">Bet Slip</div>
    <div id="box" class="boxlit" >
        <form action="" method="post">
            <!-- 第一组比赛数据 -->
            <div class="box" data-id="4">Lanus - Godoy Cruz
                <div>Draw</div>
                <div class="crtTotal">3.05</div>
                <input type="hidden" name="match[]" value="Lanus - Godoy Cruz">
                <input type="hidden" name="selection[]" value="Draw">
                <input type="hidden" name="odd[]" value="3.05">
            </div>
            <!-- 第二组比赛数据 -->
            <div class="box" data-id="8">Deportivo Pasto - Envigado
                <div>Away</div>
                <div class="crtTotal">4.70</div>
                <input type="hidden" name="match[]" value="Deportivo Pasto - Envigado">
                <input type="hidden" name="selection[]" value="Away">
                <input type="hidden" name="odd[]" value="4.70">
            </div>
            <!-- 第三组比赛数据 -->
            <div class="box" data-id="9">Union Manabita - Emelec
                <div>Home</div>
                <div class="crtTotal">8.25</div>
                <input type="hidden" name="match[]" value="Union Manabita - Emelec">
                <input type="hidden" name="selection[]" value="Home">
                <input type="hidden" name="odd[]" value="8.25">
            </div>
            <!-- 第四组比赛数据 -->
            <div class="box" data-id="12">New Jersey Copa - FC Motown II
                <div>Home</div>
                <div class="crtTotal">3.35</div>
                <input type="hidden" name="match[]" value="New Jersey Copa - FC Motown II">
                <input type="hidden" name="selection[]" value="Home">
                <input type="hidden" name="odd[]" value="3.35">
            </div>
            
            <!-- 总赔率、赔付金额的隐藏控件 -->
            <input type="hidden" name="totalOdds" value="475.42">
            <input type="hidden" name="payout" value="2377.10">
            
            <br>
            <div>Total Odds: <b id="ct1">475.42</b></div><br>
            <div>(N$)Stake: <input id="stake" type="number" name="stakeAmount" value="5"> NAD</div><br>
            <div>Payout: N$ <b id="payout">2377.10</b></div>
            <input type="submit" name="submit" value="Bet">
        </form>
    <div class="footer"></div>
</div>
</body>
</html>

关键说明

前端通过name="match[]"的数组命名方式，让后端能接收多组比赛数据。
后端使用预处理语句彻底避免SQL注入风险，同时支持高效批量插入。
循环中过滤空数据，防止无效记录插入数据库。
$paramTypes的字符需与数据库字段类型匹配，可根据实际表结构调整。

内容的提问来源于stack exchange，提问作者Nambuli89

如何将购物车中多组div数据提交至SQL数据库？

1. 前端调整：转为表单控件+数组命名 #

2. 后端处理：预处理语句实现批量插入 #

1. 前端调整：转为表单控件+数组命名

2. 后端处理：预处理语句实现批量插入