如何使用JavaScript实现页面间数据传递并在页面上简单展示？

嘿，我来帮你搞定页面间数据传递和展示的问题！先梳理下你当前代码里的几个小问题，再一步步完善实现：

1. 先修复表单的Cancel按钮逻辑 #

你现在的表单里有两个<input type="submit">，Cancel按钮也会触发表单提交，这明显不是你想要的效果。把它改成普通按钮，用JS实现返回上一页就好：

<input type="button" value="Cancel" onclick="window.history.back()">

2. 拆分页面，完善数据传递流程 #

要完整实现“提交表单→跳转到收据页展示所有数据”的流程，我们需要把代码拆成两个独立页面：表单提交页（比如命名为booking.php）和收据展示页（receipt.php）

表单提交页（booking.php） #

这个页面负责展示用户之前的选择，同时收集用户的个人信息，提交后把所有数据传递给收据页：

<!DOCTYPE html>
<html>
<head>
    <style>
        div.container { max-width: 800px; max-height: 800px; display: inline-block; }
    </style>
</head>
<body>
    <h1>Your Selection</h1>
    <p>Here is the information you have submitted:</p>
    <div class="container">
        <ol>
            <!-- 用isset避免未定义报错，展示用户之前的选择 -->
            <li><em>AID:</em> <?php echo isset($_POST['aid']) ? $_POST['aid'] : ''; ?></li>
            <li><em>Date of Arrival:</em> <?php echo isset($_POST['Arrival']) ? $_POST['Arrival'] : ''; ?></li>
            <li><em>Number of Days:</em> <?php echo isset($_POST['Days']) ? $_POST['Days'] : ''; ?></li>
            <li><em>Number of Adults:</em> <?php echo isset($_POST['adults']) ? $_POST['adults'] : ''; ?></li>
            <li><em>Number of Children:</em> <?php echo isset($_POST['children']) ? $_POST['children'] : ''; ?></li>
            <li><em>Total:</em> <?php echo isset($_POST['Total']) ? $_POST['Total'] : ''; ?></li>
        </ol>
    </div>
    <div class="container" align="left">
        <!-- 表单提交到收据页receipt.php -->
        <form action="receipt.php" method="post">
            <!-- 用隐藏域保存之前的选择数据，传递到收据页 -->
            <input type="hidden" name="aid" value="<?php echo isset($_POST['aid']) ? $_POST['aid'] : ''; ?>">
            <input type="hidden" name="Arrival" value="<?php echo isset($_POST['Arrival']) ? $_POST['Arrival'] : ''; ?>">
            <input type="hidden" name="Days" value="<?php echo isset($_POST['Days']) ? $_POST['Days'] : ''; ?>">
            <input type="hidden" name="adults" value="<?php echo isset($_POST['adults']) ? $_POST['adults'] : ''; ?>">
            <input type="hidden" name="children" value="<?php echo isset($_POST['children']) ? $_POST['children'] : ''; ?>">
            <input type="hidden" name="Total" value="<?php echo isset($_POST['Total']) ? $_POST['Total'] : ''; ?>">

            Name : <input type="text" name="name" placeholder="Full Name" required><br>
            Phone Number : <input type="tel" name="number" placeholder="Phone Number" required><br>
            Email : <input type="email" name="Email" placeholder="Email" required><br>
            Address : <input type="text" name="Address" placeholder="Address" required><br>
            <input type="submit" value="Confirm">
            <input type="button" value="Cancel" onclick="window.history.back()">
        </form>
    </div>
</body>
</html>

收据展示页（receipt.php） #

这个页面负责接收所有提交的数据，安全地展示给用户：

<!DOCTYPE html>
<html>
<head>
    <style>
        div.container { max-width: 800px; max-height: 800px; display: inline-block; }
        .receipt { border: 1px solid #ccc; padding: 20px; border-radius: 8px; margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Booking Receipt</h1>
    <div class="container receipt">
        <h3>Booking Details</h3>
        <ol>
            <!-- 用htmlspecialchars防止XSS攻击，这是输出用户输入的最佳实践 -->
            <li><em>AID:</em> <?php echo htmlspecialchars($_POST['aid']); ?></li>
            <li><em>Date of Arrival:</em> <?php echo htmlspecialchars($_POST['Arrival']); ?></li>
            <li><em>Number of Days:</em> <?php echo htmlspecialchars($_POST['Days']); ?></li>
            <li><em>Number of Adults:</em> <?php echo htmlspecialchars($_POST['adults']); ?></li>
            <li><em>Number of Children:</em> <?php echo htmlspecialchars($_POST['children']); ?></li>
            <li><em>Total:</em> <?php echo htmlspecialchars($_POST['Total']); ?></li>
        </ol>
        <h3>Customer Information</h3>
        <ol>
            <li><em>Full Name:</em> <?php echo htmlspecialchars($_POST['name']); ?></li>
            <li><em>Phone Number:</em> <?php echo htmlspecialchars($_POST['number']); ?></li>
            <li><em>Email:</em> <?php echo htmlspecialchars($_POST['Email']); ?></li>
            <li><em>Address:</em> <?php echo htmlspecialchars($_POST['Address']); ?></li>
        </ol>
    </div>
</body>
</html>

3. 几个关键优化点说明 #

• 隐藏域传递数据：通过<input type="hidden">把用户之前的选择数据“悄悄”带到收据页，确保所有信息都能完整展示。
• 安全防护：用htmlspecialchars()处理所有输出的用户数据，避免恶意脚本注入（XSS攻击），这是PHP开发的基础安全规范。
• 表单验证：给必填字段加上required属性，强制用户填写必要信息；你还可以在PHP后端补充更严格的验证，比如检查邮箱格式、电话号码长度等。
• 取消按钮修复：把Cancel改成普通按钮，用window.history.back()返回上一页，不会触发不必要的表单提交。

这样调整后，用户点击Confirm按钮就会跳转到receipt.php页面，完整展示所有预订信息和用户个人信息啦。

内容的提问来源于stack exchange，提问作者B.JOE