技术问询：基于MySQL存储数据的HTML表单读写及JS数学计算表单实现

我帮你整理并完善了这个数学计算表单，同时补上了MySQL数据存储的完整方案，分前端和后端两部分来说明：

一、前端HTML/JS计算表单实现 #

这里我把你提供的核心代码整合到完整的HTML结构里，还加了输入校验避免非数字输入导致的错误，同时完善了下拉框的示例：

<!DOCTYPE html>
<html>
<head>
    <title>简易数学计算器</title>
</head>
<body>
    <h3>数学计算表单</h3>
    
    <!-- 输入区域 -->
    <div>
        <label>数值1：</label>
        <input type="number" id="value1" placeholder="请输入数字">
    </div>
    <div>
        <label>数值2：</label>
        <input type="number" id="value2" placeholder="请输入数字">
    </div>
    <div>
        <label>数值3：</label>
        <input type="number" id="value3" placeholder="请输入数字">
    </div>
    
    <!-- 计算模式选择 -->
    <div>
        <label>计算模式：</label>
        <select id="calcMode">
            <option value="multiAdd">((值1+值2)*值3) 计算</option>
            <option value="simpleAdd">简单加法（值1+值2）</option>
        </select>
    </div>
    
    <!-- 操作按钮 -->
    <button onclick="output()">计算结果</button>
    <button onclick="saveRecord()">保存当前计算记录</button>
    <button onclick="loadLatestRecord()">加载最近记录</button>
    
    <!-- 结果展示 -->
    <div>
        <h4>计算结果：</h4>
        <div id="result1">请点击计算按钮</div>
    </div>

    <script>
        function output() {
            // 获取输入值并转换为整数，默认0避免空值报错
            const value1 = parseInt(document.getElementById('value1').value) || 0;
            const value2 = parseInt(document.getElementById('value2').value) || 0;
            const value3 = parseInt(document.getElementById('value3').value) || 0;
            const calcMode = document.getElementById('calcMode').value;
            
            let result;
            // 根据选择的模式计算
            if (calcMode === 'multiAdd') {
                result = (value1 + value2) * value3;
            } else if (calcMode === 'simpleAdd') {
                result = value1 + value2;
            }
            
            document.getElementById('result1').innerHTML = result;
        }

        // 保存记录到后端（调用PHP接口）
        async function saveRecord() {
            const value1 = document.getElementById('value1').value;
            const value2 = document.getElementById('value2').value;
            const value3 = document.getElementById('value3').value;
            const result = document.getElementById('result1').innerHTML;
            
            if (!value1 || !value2 || !value3 || result === '请点击计算按钮') {
                alert('请先完成有效计算再保存！');
                return;
            }
            
            try {
                const response = await fetch('save.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `value1=${value1}&value2=${value2}&value3=${value3}&result=${result}`
                });
                const data = await response.text();
                alert(data);
            } catch (error) {
                console.error('保存失败:', error);
                alert('保存记录出错，请检查后端服务');
            }
        }

        // 加载最近的记录
        async function loadLatestRecord() {
            try {
                const response = await fetch('load.php');
                const record = await response.json();
                
                if (record) {
                    document.getElementById('value1').value = record.value1;
                    document.getElementById('value2').value = record.value2;
                    document.getElementById('value3').value = record.value3;
                    document.getElementById('result1').innerHTML = record.result;
                } else {
                    alert('暂无保存的记录');
                }
            } catch (error) {
                console.error('加载失败:', error);
                alert('加载记录出错，请检查后端服务');
            }
        }
    </script>
</body>
</html>

二、MySQL数据存储实现（后端PHP+MySQL） #

1. 首先创建MySQL数据库表 #

登录MySQL执行以下SQL创建存储计算记录的表：

CREATE DATABASE IF NOT EXISTS calc_db;
USE calc_db;

CREATE TABLE IF NOT EXISTS calc_records (
    id INT AUTO_INCREMENT PRIMARY KEY,
    value1 INT NOT NULL,
    value2 INT NOT NULL,
    value3 INT NOT NULL,
    result INT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. 保存记录的后端接口（save.php） #

这个文件负责接收前端发送的数据并插入到MySQL：

<?php
// 数据库连接配置
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "calc_db";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取前端POST的数据
$value1 = $_POST['value1'];
$value2 = $_POST['value2'];
$value3 = $_POST['value3'];
$result = $_POST['result'];

// 插入数据的SQL（生产环境建议用预处理语句防注入）
$sql = "INSERT INTO calc_records (value1, value2, value3, result) VALUES ('$value1', '$value2', '$value3', '$result')";

if ($conn->query($sql) === TRUE) {
    echo "记录保存成功！";
} else {
    echo "保存失败: " . $conn->error;
}

$conn->close();
?>

3. 加载记录的后端接口（load.php） #

这个文件负责查询最新的一条记录并返回给前端：

<?php
// 数据库连接配置
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "calc_db";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询最新的一条记录
$sql = "SELECT * FROM calc_records ORDER BY created_at DESC LIMIT 1";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出数据为JSON格式
    echo json_encode($result->fetch_assoc());
} else {
    echo json_encode(null);
}

$conn->close();
?>

注意事项 #

• 记得把PHP文件里的your_db_username和your_db_password替换成你自己的MySQL账号密码
• 如果是生产环境，要注意SQL注入防护，可以使用预处理语句来替代直接拼接SQL
• 前端的fetch API需要在HTTP服务环境下运行（比如XAMPP、WAMP或者线上服务器），直接打开本地HTML文件会有跨域问题

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