如何从HTML菜单页传递菜品信息至支付页？附MySQLi存储需求

一、页面间菜品信息传递（核心需求） #

1. 改造菜单页代码 #

给每个菜品容器添加data-food和data-price属性存储菜品信息，同时通过JavaScript处理Order按钮的跳转逻辑，将菜品数据以URL参数形式传递到支付页：

<div class="u-container-layout u-valign-middle u-container-layout-2" data-food="Double Burger" data-price="85.90₺">
    <h4 class="u-text u-text-3">Double Burger</h4>
    <h6 class="u-text u-text-palette-2-light-1 u-text-4">85.90₺</h6>
    <a href="#" class="order"> Order </a>
</div>
<!-- 其余5个菜品同理，修改data-food和data-price对应的值即可 -->

添加菜单页JavaScript逻辑：

const orderButtons = document.querySelectorAll('.order');

orderButtons.forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault();
        // 获取当前菜品的名称和价格
        const foodContainer = this.closest('.u-container-layout');
        const foodName = foodContainer.dataset.food;
        const foodPrice = foodContainer.dataset.price;
        
        // 对特殊字符编码，避免URL解析异常
        const encodedFood = encodeURIComponent(foodName);
        const encodedPrice = encodeURIComponent(foodPrice);
        // 构造带参数的支付页跳转地址
        const paymentUrl = `payment.html?food=${encodedFood}&price=${encodedPrice}`;
        
        window.location.href = paymentUrl;
    });
});

2. 改造支付页代码 #

添加JavaScript读取URL参数，自动填充到禁用输入框中，同时修正原代码中label的拼写错误（oderedFoodsPrice改为orderedFoodsPrice）：

<div class="form-body">
    <label for="orderedFood"> Ordered Food: </label>
    <input type="text" name="orderedFood" class="ordered-food" disabled/>
    <br>
    <label for="orderedFoodsPrice"> Price: </label>
    <input type="text" name="orderedFoodsPrice" class="ordered-foods-price" disabled/>
    <br>
    <!-- 补充桌号、手机号等必填输入框 -->
    <label for="tableNumber">桌号:</label>
    <input type="text" name="tableNumber" required>
    <br>
    <label for="phone">手机号:</label>
    <input type="tel" name="phone" required>
    <br>
    <button type="submit">提交订单</button>
</div>

支付页JavaScript逻辑：

// 封装URL参数获取工具函数
function getUrlParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
}

// 页面加载完成后填充数据
window.addEventListener('load', function() {
    const foodName = decodeURIComponent(getUrlParam('food') || '');
    const foodPrice = decodeURIComponent(getUrlParam('price') || '');
    
    document.querySelector('.ordered-food').value = foodName;
    document.querySelector('.ordered-foods-price').value = foodPrice;
});

二、订单信息存入MySQLi数据库 #

1. 创建数据库订单表 #

在MySQL中执行以下SQL创建存储订单的表：

CREATE TABLE orders (
    id INT AUTO_INCREMENT PRIMARY KEY,
    food_name VARCHAR(255) NOT NULL,
    food_price VARCHAR(50) NOT NULL,
    table_number VARCHAR(20) NOT NULL,
    phone VARCHAR(20) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. 后端PHP处理代码（order_submit.php） #

创建PHP文件接收表单提交的数据，通过预处理语句插入数据库（避免SQL注入）：

<?php
// 数据库连接配置，替换为你的实际信息
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_db_name";

// 建立数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取表单提交的订单数据
$foodName = $_POST['orderedFood'];
$foodPrice = $_POST['orderedFoodsPrice'];
$tableNumber = $_POST['tableNumber'];
$phone = $_POST['phone'];

// 使用预处理语句插入数据
$stmt = $conn->prepare("INSERT INTO orders (food_name, food_price, table_number, phone) VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $foodName, $foodPrice, $tableNumber, $phone);

if ($stmt->execute()) {
    echo "订单提交成功，餐厅将尽快处理";
} else {
    echo "订单提交失败: " . $stmt->error;
}

// 关闭连接
$stmt->close();
$conn->close();
?>

3. 修改支付页表单提交地址 #

给支付页的form标签添加action和method属性，指向PHP处理文件：

<form action="order_submit.php" method="POST" class="form-body">
    <!-- 原有输入框保持不变 -->
    <label for="orderedFood"> Ordered Food: </label>
    <input type="text" name="orderedFood" class="ordered-food" disabled/>
    <br>
    <label for="orderedFoodsPrice"> Price: </label>
    <input type="text" name="orderedFoodsPrice" class="ordered-foods-price" disabled/>
    <br>
    <label for="tableNumber">桌号:</label>
    <input type="text" name="tableNumber" required>
    <br>
    <label for="phone">手机号:</label>
    <input type="tel" name="phone" required>
    <br>
    <button type="submit">提交订单</button>
</form>

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