当前位置：首页 > 文章列表 > 文章 > 前端 > URL参数传递数据的几种方式解析

URL参数传递数据的几种方式解析

2025-09-12 19:24:41 0浏览收藏

本文详细介绍了Web开发中利用URL查询参数在不同HTML页面间传递数据的方法，并结合点餐系统实例，演示了如何将商品名称和价格从菜单页安全传递至支付页并自动填充表单。文章深入讲解了URL编码、参数构建与解析等关键步骤，同时强调了数据安全、URL长度限制等注意事项。通过本文，开发者可以掌握一种简单有效的跨页面数据传递技巧，提升Web应用的交互性和用户体验。

如何通过URL查询参数在不同HTML页面间传递数据

本教程详细阐述了如何在不同HTML页面之间传递数据，特别聚焦于使用URL查询参数的方法。我们将通过一个点餐系统示例，演示如何从一个菜单页面获取商品名称和价格，并通过点击按钮将其安全地传递到支付页面，并在支付页面自动填充相应的表单输入框。文章涵盖了数据编码、URL构建以及在目标页面解析和使用这些数据，并提供了详细的代码示例和注意事项。

在Web开发中，经常会遇到需要在不同页面之间传递数据的场景。例如，在一个电商网站中，用户从商品列表页选择某个商品后，需要将该商品的ID、名称、价格等信息传递到订单确认页或支付页。本文将以一个点餐系统为例，详细讲解如何利用URL查询参数（Query Parameters）在两个HTML页面之间传递数据。

方法概述：URL 查询参数

URL查询参数是一种简单有效的数据传递机制。它通过在URL末尾附加?符号，然后跟随一系列key=value对来传递数据，多个键值对之间用&符号连接。例如：payment.html?productName=Double%20Burger&productPrice=85.90%E2%82%B9。当浏览器加载这个URL时，目标页面可以通过JavaScript解析这些参数，从而获取所需的数据。

第一步：在源页面（菜单页）准备并发送数据

在点餐系统的菜单页中，每个菜品都有一个“点餐”按钮，点击后需要将菜品的名称和价格传递到支付页面。

菜单页（menu.html）HTML结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单页面</title>
</head>
<body>
    <h1>美味菜单</h1>

    <div class="u-container-layout u-valign-middle u-container-layout-2">
        <h4 class="u-text u-text-3">双层汉堡</h4>
        <h6 class="u-text u-text-palette-2-light-1 u-text-4">85.90₺</h6>
        <a href="payment.html" class="order"> 点餐 </a>
    </div>

    <div class="u-container-layout u-valign-middle u-container-layout-2">
        <h4 class="u-text u-text-3">香辣鸡翅</h4>
        <h6 class="u-text u-text-palette-2-light-1 u-text-4">35.00₺</h6>
        <a href="payment.html" class="order"> 点餐 </a>
    </div>

    <!-- 更多菜品... -->

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 获取所有带有 'order' 类的链接
            const orderLinks = document.querySelectorAll('.order');

            orderLinks.forEach(link => {
                link.addEventListener('click', (event) => {
                    // 阻止默认的链接跳转行为，以便我们能自定义URL
                    event.preventDefault(); 

                    // 获取当前点击链接的父级容器
                    const parentDiv = link.closest('.u-container-layout-2');
                    // 从父级容器中获取菜品名称和价格
                    const foodName = parentDiv.querySelector('h4').textContent.trim();
                    const foodPrice = parentDiv.querySelector('h6').textContent.trim();

                    // 对数据进行URL编码，以确保特殊字符（如空格、货币符号）能正确传递
                    const encodedFoodName = encodeURIComponent(foodName);
                    const encodedFoodPrice = encodeURIComponent(foodPrice);

                    // 构建带有查询参数的目标URL
                    const targetUrl = `payment.html?productName=${encodedFoodName}&productPrice=${encodedFoodPrice}`;

                    // 跳转到新的URL
                    window.location.href = targetUrl;
                });
            });
        });
    </script>
</body>
</html>

代码解析：

document.querySelectorAll('.order'): 选中所有“点餐”按钮。
link.addEventListener('click', (event) => { ... }): 为每个按钮添加点击事件监听器。
event.preventDefault(): 阻止标签的默认跳转行为，这样我们才能在JavaScript中构造新的URL并进行跳转。
link.closest('.u-container-layout-2'): 找到当前点击链接最近的祖先元素，该元素包含菜品名称和价格。
querySelector('h4').textContent.trim(): 获取菜品名称（h4标签的文本内容），并去除首尾空格。
encodeURIComponent(): 这是非常关键的一步。它用于对URL参数值进行编码，将空格、特殊符号等转换为URL安全的格式，防止数据丢失或URL解析错误。

第二步：在目标页面（支付页）接收并使用数据

支付页面加载时，需要从URL中解析出传递过来的菜品名称和价格，并自动填充到相应的输入框中。

支付页（payment.html）HTML结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付页面</title>
</head>
<body>
    <h1>订单详情</h1>

    <div class="form-body">
        <label for="orderedFood"> 所点餐品: </label>
        &lt;input type=&quot;text&quot; id=&quot;orderedFood&quot; name=&quot;orderedFood&quot; class=&quot;ordered-food&quot; disabled /&gt;
        <br>
        <label for="orderedFoodsPrice"> 价格: </label>
        &lt;input type=&quot;text&quot; id=&quot;orderedFoodsPrice&quot; name=&quot;orderedFoodsPrice&quot; class=&quot;ordered-foods-price&quot; disabled /&gt;
        <br>
        <!-- 其他支付信息输入框 -->
        <label for="cardNumber"> 信用卡号: </label>
        &lt;input type=&quot;text&quot; id=&quot;cardNumber&quot; name=&quot;cardNumber&quot; /&gt;
        <br>
        <label for="tableNumber"> 桌号: </label>
        &lt;input type=&quot;text&quot; id=&quot;tableNumber&quot; name=&quot;tableNumber&quot; /&gt;
        <br>
        <label for="phoneNumber"> 电话号码: </label>
        &lt;input type=&quot;text&quot; id=&quot;phoneNumber&quot; name=&quot;phoneNumber&quot; /&gt;
        <br>
        <button type="submit">确认支付</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 获取当前页面的URL查询字符串（例如：?productName=Double%20Burger&productPrice=85.90%E2%82%B9）
            const queryString = window.location.search;
            // 使用 URLSearchParams API 解析查询字符串
            const urlParams = new URLSearchParams(queryString);

            // 通过键名获取对应的值
            const productName = urlParams.get('productName');
            const productPrice = urlParams.get('productPrice');

            // 获取需要填充的输入框元素
            const orderedFoodInput = document.querySelector('.ordered-food');
            const orderedFoodPriceInput = document.querySelector('.ordered-foods-price');

            // 检查获取到的值是否存在，并填充到输入框中
            if (orderedFoodInput && productName) {
                orderedFoodInput.value = productName;
            }
            if (orderedFoodPriceInput && productPrice) {
                orderedFoodPriceInput.value = productPrice;
            }
        });
    </script>
</body>
</html>

代码解析：