如何将应用中表单数据传递至其他页面？新手求助确认页实现

因为你不需要实际收集数据，只用前端就能完成这个流程，下面是具体实现步骤和代码：

1. 表单页面（form.html） #

这是用户填写信息的页面，我们用表单收集数据，提交时阻止默认跳转，把需要的参数通过URL传递到确认页（或者先跳加载页）。

<!DOCTYPE html>
<html>
<head>
    <title>订单表单</title>
    <style>
        .form-container { max-width: 400px; margin: 2rem auto; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; }
        .form-group { margin-bottom: 1rem; }
        label { display: block; margin-bottom: 0.5rem; }
        input, select { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
        button { width: 100%; padding: 0.7rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>填写订单信息</h2>
        <form id="orderForm">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" required>
            </div>
            <div class="form-group">
                <label for="address">地址</label>
                <input type="text" id="address" required>
            </div>
            <div class="form-group">
                <label for="color">商品颜色</label>
                <select id="color" required>
                    <option value="">请选择颜色</option>
                    <option value="白色">白色</option>
                    <option value="黑色">黑色</option>
                    <option value="蓝色">蓝色</option>
                    <option value="灰色">灰色</option>
                </select>
            </div>
            <div class="form-group">
                <label for="email">邮箱地址</label>
                <input type="email" id="email" required>
            </div>
            <button type="submit">提交订单</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('orderForm');
        form.addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            
            // 获取表单数据
            const name = document.getElementById('name').value;
            const color = document.getElementById('color').value;
            
            // 可选：先跳转到加载页，再跳转确认页
            // window.location.href = `loading.html?name=${encodeURIComponent(name)}&color=${encodeURIComponent(color)}`;
            
            // 直接跳转到确认页（如果不需要加载页就用这个）
            window.location.href = `confirmation.html?name=${encodeURIComponent(name)}&color=${encodeURIComponent(color)}`;
        });
    </script>
</body>
</html>

2. 可选加载页面（loading.html） #

如果需要加载过渡效果，用这个页面，停留几秒后自动跳转到确认页：

<!DOCTYPE html>
<html>
<head>
    <title>处理中...</title>
    <style>
        .loading-container { text-align: center; margin-top: 10rem; }
        .loader { border: 8px solid #f3f3f3; border-top: 8px solid #007bff; border-radius: 50%; width: 60px; height: 60px; animation: spin 2s linear infinite; margin: 0 auto 1rem; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
</head>
<body>
    <div class="loading-container">
        <div class="loader"></div>
        <p>正在处理您的订单...</p>
    </div>

    <script>
        // 获取URL参数
        const params = new URLSearchParams(window.location.search);
        const name = params.get('name');
        const color = params.get('color');
        
        // 3秒后跳转到确认页
        setTimeout(() => {
            window.location.href = `confirmation.html?name=${encodeURIComponent(name)}&color=${encodeURIComponent(color)}`;
        }, 3000);
    </script>
</body>
</html>

3. 确认页面（confirmation.html） #

这个页面从URL参数中获取姓名和颜色，展示个性化提示：

<!DOCTYPE html>
<html>
<head>
    <title>订单确认</title>
    <style>
        .confirmation-container { max-width: 500px; margin: 5rem auto; padding: 2rem; border: 1px solid #ddd; border-radius: 8px; text-align: center; }
        .message { font-size: 1.2rem; line-height: 1.5; margin-bottom: 1rem; }
    </style>
</head>
<body>
    <div class="confirmation-container">
        <h2>订单已确认！</h2>
        <p class="message" id="confirmationMessage"></p>
        <p>请查看您的邮箱获取更多详情</p>
    </div>

    <script>
        // 获取URL中的参数
        const params = new URLSearchParams(window.location.search);
        const name = params.get('name');
        const color = params.get('color');
        
        // 渲染个性化消息
        const messageElement = document.getElementById('confirmationMessage');
        messageElement.textContent = `感谢${name}，您订购的${color}衬衫即将发出`;
    </script>
</body>
</html>

关键说明： #

• 用encodeURIComponent()处理参数，避免特殊字符导致的URL错误
• 表单的e.preventDefault()阻止了默认的表单提交（不会真的发送数据到服务器）
• 加载页用setTimeout()实现延迟跳转
• 确认页通过URLSearchParams读取URL里的参数，动态生成内容

你只需要把这三个文件放在同一个文件夹里，打开form.html就能测试整个流程了。

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