javascript - 如何将用户输入输出到不同的网页？

标签 javascript php html mysql

我正在建立一个订购披萨的网站，并希望能够在结帐页面上输出用户的订单。我需要知道用户点击了哪个图像，每个图像都是不同的披萨。酱汁工作得很好，因为我可以使用带有提交按钮的表单，但是对于 OnlinePizzaOrderingPage.html 我无法使用提交按钮。我在下面包含了 sql 标签，因为允许使用 sql，但我不知道它在这种情况下是否有帮助。如何实现在ShoppingCart.php页面上显示用户选择的披萨类型？

我尝试过使用 php 和 Javascript 使用 POST 和 GET。

OnlinePizzaOrderingPage.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Online Pizza Ordering Page</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script>
    function imageTitle(title){
     alert(title);
     console.log(title);
    }
    </script>
    </head>
    <body>
    <h1>Online Pizza Ordering Page</h1>
    <a href="Detailedsauceandquantitypage.html"><img src="supreme.jpg" 
    width="82" height="86" title="Supreme" alt="Supreme" 
    onclick="imageTitle(this.title);"></a>
    <a href="Detailedsauceandquantitypage.html"><img src="meatlover.jpg" 
    width="82" height="86" title="Meatlover" alt="Meatlover" 
    onclick="imageTitle(this.title);"></a>
    <a href="Detailedsauceandquantitypage.html"><img src="hawaii.jpg" 
    width="82" height="86" title="Hawaii" alt="Hawaii" 
    onclick="imageTitle(this.title);"></a>
    <a href="Detailedsauceandquantitypage.html"><img 
src="fourseasons.jpg" 
    width="82" height="86" title="Four Seasons" alt="Four Seasons" 
    onclick="imageTitle(this.title);"></a>
    <a href="Detailedsauceandquantitypage.html"><img src="vege.jpg" 
width="82" 
    height="86" title="Vege" alt="Vege" 
onclick="imageTitle(this.title);"></a>
    </body>
    </html>

DetailedSauceandquantitypage.html

    <!DOCTYPE html>
    <html>
        <head>
            <script src="script.js"></script>
            <title>Detailed sauce and quantity page</title>
            <link rel="stylesheet" type="text/css" href="mystyle.css">
        </head>
        <body>
            <h1>Detailed sauce and quantity page</h1>
                <form action="ShoppingCartpage.php" method="POST">
                    <img src="bbq.jpg" alt="BBQ">
                    <label for="numberOfSauces">Number of Pizzas 
    (0-100):</label>
                    <input type="number" name="bbqPizza" min="0" 
    max="100" value="0"><br>
                    <img src="tomato.jpg" alt="Tomato">
                    <label for="numberOfSauces">Number of Pizzas 
   (0-100):</label>
                    <input type="number" name="tomatoPizza" 
    min="0" max="100" value="0"><br>
                    <img src="salsa.jpg" alt="Salsa">
                    <label for="numberOfSauces">Number of Pizzas 
    (0-100):</label>
                    <input type="number" name="salsaPizza" min="0" 
    max="100" value="0"><br>
                <input type="submit" value="Add to cart" 
    name="submit"><br>
                </form>
        </body>
    </html>

ShoppingCartpage.php

    <!DOCTYPE html>
    <html>
    <head>
    <title>Shopping Cart page</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script>
    function imageTitle(title){
     alert(title);
     console.log(title);
    }
    </script>
    </head>
    <body>
    <h1>Shopping Cart page</h1>
    <?php
    // define variables and set to empty values
    $bbqPizza = $tomatoPizza = $salsaPizza = "";

    if ( isset( $_POST['submit'] ) ) {
        $bbq = $_POST["bbqPizza"];
        $tomato = $_POST["tomatoPizza"];
        $salsa = $_POST["salsaPizza"];
        echo $bbq . " pizzas with bbq sauce, " . $tomato . " pizzas with 
    tomato sauce and " . $salsa . " pizzas with salsa sauce.";
    }
    ?>
    <br>
    <a href="OnlinePizzaOrderingPage.html">Add more pizzas to cart</a>
    <a href="Checkoutpage.html">Go to checkout</a>
    </body>
    </html>

预期结果是用户通过单击 OnlinePizzaOrderingPage.html 上的图像选择的披萨类型，并将其显示在 ShoppingCart.php 页面上。

最佳答案

.html 没有检索或存储请求值(post/get)的 native 方法，然后可以将其传递到 PHP 文件。您需要将 DetailedSauceandquantitypage.html 更改为 PHP 页面，并使用 OnlinePizzaOrderingPage.html 中的查询字符串来确定单击了哪个链接，例如 href ="DetailedSauceandquantitypage.php?pizza=Supreme"。

As was mentioned in a previous question you made, you should seriously consider converting all of your .html files to .php, to avoid having make a ton of changes later, when you want to expand your application files to use php code.

更多详情请参见Variables From External Sources

如果您使用 Apache Web 服务器，您可以使用 SSI (server side includes) ，但由于您使用的是 PHP，因此转换为 PHP 会简单得多且不易出错。

示例:

为了简洁起见，我删除了一些 JavaScript。我也不确定除了将其存储在数据库中之外，您还希望如何添加或 checkout 当前订单。

OnlinePizzaOrderingPage.html

<!DOCTYPE html>
<html>
<head>
    <title>Online Pizza Ordering Page</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>Online Pizza Ordering Page</h1>
    <a href="Detailedsauceandquantitypage.php?pizza=supreme">
        <img src="supreme.jpg" width="82" height="86" title="Supreme" alt="Supreme">
    </a>
    <a href="Detailedsauceandquantitypage.php?pizza=meatlover">
        <img src="meatlover.jpg" width="82" height="86" title="Meatlover" alt="Meatlover">
    </a>
    <a href="Detailedsauceandquantitypage.php?pizza=hawaii">
        <img src="hawaii.jpg" width="82" height="86" title="Hawaii" alt="Hawaii">
    </a>
    <a href="Detailedsauceandquantitypage.php?pizza=fourseasons">
        <img src="fourseasons.jpg" width="82" height="86" title="Four Seasons" alt="Four Seasons">
    </a>
    <a href="Detailedsauceandquantitypage.php?pizza=vege">
        <img src="vege.jpg" width="82" height="86" title="Vege" alt="Vege">
    </a>
</body>
</html>

详细酱料和数量页面.php

<!DOCTYPE html>
<html>
<head>
    <script src="script.js"></script>
    <title>Detailed sauce and quantity page</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>Detailed sauce and quantity page</h1>
    <form action="ShoppingCartpage.php" method="POST">
        <!-- set form value to retrieve and pass the selected pizza to the cart -->
        <input type="hidden" name="pizza" value="<?php echo htmlspecialchars($_GET['pizza'], ENT_QUOTES, 'UTF-8', false); ?>">

        <img src="bbq.jpg" alt="BBQ">
        <label for="numberOfSauces">Number of Pizzas (0-100):</label>
        <input type="number" name="bbqPizza" min="0" max="100" value="0">
        <br>
        <img src="tomato.jpg" alt="Tomato">
        <label for="numberOfSauces">Number of Pizzas (0-100):</label>
        <input type="number" name="tomatoPizza" min="0" max="100" value="0"> 
        <br>
        <img src="salsa.jpg" alt="Salsa">
        <label for="numberOfSauces">Number of Pizzas (0-100):</label>
        <input type="number" name="salsaPizza" min="0" max="100" value="0"> 
        <br>
        <input type="submit" value="Add to cart" name="submit">
        <br>
    </form>
</body>
</html>

ShoppingCartpage.php

<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart page</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>Shopping Cart page</h1>
    <?php
    // define variables and set to empty values
    $bbqPizza = $tomatoPizza = $salsaPizza = "";

    if ( isset( $_POST['submit'] ) ) {
        $pizza = $_POST['pizza']; //value from first page
        $bbq = $_POST["bbqPizza"];
        $tomato = $_POST["tomatoPizza"];
        $salsa = $_POST["salsaPizza"];
        echo "A " . $pizza . " pizza, " .  $bbq . " pizzas with bbq sauce, " . $tomato . " pizzas with tomato sauce and " . $salsa . " pizzas with salsa sauce.";

       //where are these stored to Add More or Checkout?
    }
    ?>
    <br>
    <a href="OnlinePizzaOrderingPage.html">Add more pizzas to cart</a>
    <a href="Checkoutpage.html">Go to checkout</a>
</body>
</html>

关于javascript - 如何将用户输入输出到不同的网页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56411573/

上一篇：mysql - 如何将 MySQLdb 代码连接到谷歌云 SQL？

下一篇：mysql - 玛丽亚数据库。使用事务回滚而不锁定表

相关文章：

javascript - 随机化数组，选取 2 个随机对象，然后填充一个新数组？

php - docker MySQL : create new user

html - 是否可以根据其内容减小 `<span>` 上的字体大小？

javascript - JsonWebToken 用户身份验证问题

JavaScript 模块模式对比jQuery 插件

php - 如何通过隐藏字段传递数组

php - PHP-CURL 的 curl_multi_exec 内部真的是多线程的吗？

html - CSS 效果添加为主动效果

jquery - Anythingslider 触摸滑动功能停止正常点击 IOS 和平板设备上的链接

Javascript 转到 ID 减去一些像素

©2024 IT工具网  联系我们