如何将JavaScript生成的优惠码数据传递至PHP存入数据库？

你可以通过前端发起HTTP请求把生成的patternCodes数据发送到PHP后端，后端接收后再写入数据库。下面是具体的实现步骤：

一、修改前端JavaScript代码 #

在fillList函数执行完成后，添加发送数据的逻辑。推荐使用现代的Fetch API（也可以用传统的XMLHttpRequest，后面会补充）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优惠码生成器</title>
    <script src="../voucher_codes.js"></script>
</head>
<body>
    <h1>pattern codes</h1>
    <ul id="pattern-codes"></ul>
    <script>
        var patternCodes = voucher_codes.generate({
            prefix: "BREAK-",
            postfix: "-2019",
            length:5,
            count: 5,
            charset: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        });

        function fillList(listId, items) {
            var list = document.getElementById(listId);
            items.forEach(function(item) {
                list.innerHTML += "<li>" + item + "</li>";
            });
        }

        fillList("pattern-codes", patternCodes);

        // 新增：将优惠码发送到PHP后端
        fetch('save_codes.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({codes: patternCodes}),
        })
        .then(response => response.text())
        .then(data => {
            console.log('数据保存结果:', data);
            // 这里可以添加成功后的提示，比如弹窗显示"优惠码已保存"
        })
        .catch((error) => {
            console.error('请求出错:', error);
        });
    </script>
</body>
</html>

如果需要兼容旧浏览器，可以用XMLHttpRequest替代Fetch：

// 替换上面的Fetch代码
var xhr = new XMLHttpRequest();
xhr.open('POST', 'save_codes.php', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
    if (this.status >= 200 && this.status < 400) {
        console.log('数据保存结果:', this.responseText);
    } else {
        console.error('服务器响应出错');
    }
};
xhr.onerror = function() {
    console.error('请求连接出错');
};
xhr.send(JSON.stringify({codes: patternCodes}));

二、编写PHP后端代码（save_codes.php） #

创建一个save_codes.php文件，负责接收前端传来的优惠码，然后存入数据库。这里用PDO来操作数据库，更安全且兼容性好：

<?php
// 1. 配置数据库连接信息
$db_host = '你的数据库主机';
$db_name = '你的数据库名';
$db_user = '数据库用户名';
$db_pass = '数据库密码';

try {
    // 2. 建立数据库连接
    $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 3. 接收前端传来的JSON数据
    $input = file_get_contents('php://input');
    $data = json_decode($input, true);

    if (!isset($data['codes']) || !is_array($data['codes'])) {
        echo '错误：未收到有效优惠码数据';
        exit;
    }

    // 4. 准备插入SQL语句（使用预处理语句防止SQL注入）
    $stmt = $pdo->prepare("INSERT INTO voucher_codes (code) VALUES (:code)");

    // 5. 循环插入每个优惠码
    $successCount = 0;
    foreach ($data['codes'] as $code) {
        $stmt->bindParam(':code', $code);
        $stmt->execute();
        $successCount++;
    }

    echo "成功保存 $successCount 个优惠码";

} catch(PDOException $e) {
    echo '数据库错误：' . $e->getMessage();
}
?>

三、注意事项 #

• 数据库表准备：你需要先在数据库中创建一个voucher_codes表，比如：

  CREATE TABLE voucher_codes (
      id INT AUTO_INCREMENT PRIMARY KEY,
      code VARCHAR(50) NOT NULL UNIQUE,
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
  );
  

• 安全性：使用预处理语句可以有效防止SQL注入；同时可以添加权限验证（比如后端验证请求来源），避免恶意请求。
• 跨域问题：如果前端页面和PHP后端不在同一个域名下，需要在PHP后端添加跨域响应头，或者使用代理。
• 错误处理：前端和后端都要添加错误处理逻辑，方便排查问题。

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