如何从另一个 HTML 页面获取值？

Question

我想设计一个网站，您可以在餐厅使用二维码访问该网站并通过该网站点餐。我有一个主页，您可以在其中看到菜单。每种食物都有一个按钮，可以打开付款页面。支付页面有一些输入，如信用卡信息、表号和电话号码。还有两个输入被禁用。这些输入用于我们要订购的食物名称和价格。我想通过单击第一个 HTML 页面中的“订购”按钮自动填充这些禁用的输入。有 6 种不同的食物，它们都有不同的价格。我怎样才能从第一个 HTML 的文本中获取食物名称和价格的值到第二个 HTML 的输入？

第一个 HTML

<div class="u-container-layout u-valign-middle u-container-layout-2">
    <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="payment.html" class="order"> Order </a>
</div>

第二个 HTML

<div class="form-body">
    <label for="orderedFood"> Ordered Food: </label>
    <input type="text" name="orderedFood" class="ordered-food" disabled/>
    <br>
    <label for="oderedFoodsPrice"> Price: </label>
    <input type="text" name="orderedFoodsPrice" class="ordered-foods-price" disabled/>
    <br>
</div>

我想通过单击订购按钮用食品名称和价格的文本填充输入 orderedFood 和 orderedFoodsPrice。我还将为 Mysqli 表使用这两个输入。餐厅老板将在 Mysqli 表中看到订单。如果你也能帮忙，我会很高兴，但我的首要任务是传递价值观。

Answer 1

为了获得定价，您需要使用

POST

请求将数据发送到数据库，并通过向适当的端点发出

GET

请求来在任何地方使用它。

另一种方法是通过将其作为查询参数发送来重定向到要使用此数据的页面

Answer 2

不是这样的，食物的名称和价格是输入元素 所以他们由 php 控制。这就是我的想法。

Answer 3

在第一个 HTML 锚标记中添加价格和食品名称作为查询搜索参数。

第一个 HTML

<div class="u-container-layout u-valign-middle u-container-layout-2">
    <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="payment.html" class="order"> Order </a>
</div>

在 Vanilla JS 的帮助下，从搜索参数中获取值并设置输入值。

第二个 HTML

<div class="form-body">
        <label for="orderedFood"> Ordered Food: </label>
        <input type="text" name="orderedFood" class="ordered-food" disabled />
        <br>
        <label for="oderedFoodsPrice"> Price: </label>
        <input type="text" name="orderedFoodsPrice" class="ordered-foods-price" disabled />
        <br>
    </div>


    <script>
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const productName = urlParams.get('productName');
        const productPrice = urlParams.get('productPrice');

        // Fill the input fields with the values
        const orderedFoodInput = document.querySelector('.ordered-food');
        const orderedFoodPriceInput = document.querySelector('.ordered-foods-price');

        orderedFoodInput.value = productName;
        orderedFoodPriceInput.value = productPrice;
    </script>

注意：当页面加载提供的查询参数时， 具有类名 ordered-food 和 ordered-foods-price 的输入字段 将填充相应的值。