提交是成功的文本即使重新加载后也不会出现

Posted 2023-02-25

技术标签:

【中文标题】提交是成功的文本即使重新加载后也不会出现【英文标题】：Submission is successful text not going even after reloading 【发布时间】：2021-08-29 04:11:56 【问题描述】：

我目前正在开发一个小型 php 项目，其中包括一个使用 xampp 服务器的简单表单。该表单正在运行，但我面临的问题是我希望在用户提交表单时出现“表单提交成功”文本。 现在的问题是，一旦有人第一次访问我的页面，它是不可见的，但一旦他提交了，即使重新加载页面多次，它也不会消失。 下面是我的PHP代码：我已经声明了一个变量'insert'，我首先将它声明为false，然后在成功插入数据时将其值更改为true。我在我的 html 文件中说，如果 'insert' 值为 true，则打印此内容。

            <?php
        $insert= false;
        if (isset($_POST['name']))

            //Connection Variables
            $server= "localhost";
            $username="root";
            $password="";

            //Create a database connection
            $con = mysqli_connect($server,$username,$password);

            //Check for Connection success
            if(!$con)
                die("Connection to this database failed due to".mysqli_connect_error());
            

            //Collect Post var
            $name = $_POST['name'];
            $email = $_POST['email'];
            $age = $_POST['age'];
            $gender = $_POST['gender'];
            $phone = $_POST['phone'];
            $desc = $_POST['desc'];

            $sql= " INSERT INTO `trip`.`trip` (`name`, `age`, `gender`, `email`, `phone`, `desc`, `date`) 
            VALUES ('$name', '$age', '$gender', '$email', '$phone', '$desc', current_timestamp()); ";


            //Execute query

            if($con->query($sql)==true)
                // echo "Successfully inserted";
                $insert= true;

            
            else
                echo "Error: $sql <br> $con->error";
            


            //Close connection
            $con-> close();

        
        ?>


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://fonts.googleapis.com/css?family=Roboto|Sriracha&display=swap" rel="stylesheet">
            <title>Trip Form</title>
            <link rel="stylesheet" href="styles.css">
        </head>
        <body>
            <img class="bg" src="bg.jpg" >
            <div class="container">
                <h1>Welcome to Book Karo Apni Trip</h1>
                <p>Enter your Details to confirm your participation.</p>
                <?php
                if($insert==true)
                echo "<p class='submitMsg'>Thanks for submitting your form. We are happy to see you joining us for the trip</p> ";
                
                ?>
                <form action="index.php" method="post">
                    <input type="text" name="name" id="name" placeholder="Enter your name">
                    <input type="text" name="age" id="age" placeholder="Enter your age">
                    <input type="text" name="gender" id="gender" placeholder="Enter your gender">
                    <input type="email" name="email" id="email" placeholder="Enter your email">
                    <input type="phone" name="phone" id="phone" placeholder="Enter your mobile number">
                    <textarea name="desc" id="desc" cols="30" rows="10"placeholder="Enter any other information here"></textarea>
                    <button class="btn">Submit</button>
                    <!-- <button class="btn">Reset</button> -->
                    </form> 


            </div>

            <script type="text/javascript">
        window.onbeforeunload = function(e) 
            document.cookie = 'cookiename=; expires=' + d.toGMTString() + ';';
        ;
            </script>
        </body>
        </html>

下面是我的 CSS 文件：

        *
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Roboto', sans-serif;
    
    .container
        max-width: 80%;
        /* background-color: rgb(229, 145, 229); */
        padding:34px;
        margin: auto;
    
    .container h1,p
        text-align: center;
        font-family: 'Sriracha', 'cursive';
        font-size: 40px;
    
    p
        font-size: 20px;
        text-align: center;
        font-family: 'Sriracha', 'cursive';
    
    .submitMsg
        font-size: 18px;
        color: green;
        background-color:#ccc;
        
    
    input,textarea
        width: 80%;
        margin: 11px auto;
        padding:7px;
        font-size: 16px;
        border: 2px solid black;
        border-radius: 6px;
        outline: none;

    
    form
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    

    .btn
        color: white;background: purple;
        padding: 8px 12px;
        font-size: 20px;
        border: 2px solid white;
        border-radius: 14px;
        cursor: pointer;
    

    .bg
        position: absolute;
        width: 100%;
        z-index: -1;
        opacity: 0.7;

【问题讨论】：

您正在重新加载页面吗？可能使用F5 或ctrl+F5 或点击浏览器中的刷新按钮？ @endeavour 是的，我尝试过使用普通重载（Ctrl+R）重新加载它，我什至尝试了硬重载，以及开发人员工具中的“空缓存和硬重载”。但它总是可见的，一旦有人提交表单。 警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough! 【参考方案1】：

重新加载页面时，post 数据会重新发送。您可能已经注意到许多银行或电子商务网站都显示不重新加载页面的通知。那是因为与表单相关的操作被重新处理（尽管他们有保护）。

因此，每次重新加载网页时都会重新提交表单。如果您提供了完整的代码，那么每次重新加载都会插入一个新行。

有很多方法可以在不重新提交数据的情况下重新加载。一些例子是

将用户重定向到其他页面。使用 ajax 处理提交在向 mysql 插入数据之前检查重复值。

这些可能是基本方法。这些都是关于 SO 和外部的非常好的文档。

【讨论】：

【参考方案2】：

建议您改用 alert()。或者您可以将该页面导航到其他页面，例如登录页面。

【讨论】：

【参考方案3】：

使用警报或 toast 来指示成功/错误消息

【讨论】：