【问题标题】:Webpage wrongfully reloads on javascript close网页在 javascript 关闭时错误地重新加载
【发布时间】:2021-03-19 05:54:30
【问题描述】:

尝试仅使用 php mysql 查询(即没有 jQuery 或 AJAX),根据制造商的选择创建一个动态选择型号的网页。用户将选择制造商,提交表单,然后网页将重新加载所有用户输入和新填充的型号选择字段。

我有 2 种形式,一种是主要的可见形式,我的 mysql 数据库需要所有输入,另一种是可以通过部分输入提交的隐藏形式。隐藏的唯一目的是提交制造商并维护用户在页面上提供的所有其他输入。

<form id="partialnew" action="page.php" method="post">
    <input id="partialnewmodel" name="partialnewmodel" type="hidden">
    ... other similar inputs ...
</form>

<form id="new" action="page.php" method="post">
    <select id="newmanufacturer" name="newmanufacturer" onchange=populatemodels() form="partialnew">
        <option value="">-</option>
        <?php
            ... populated from mysql query ...
        ?>
    </select>

    <select id="newmodel" name="newmodel" required>
    </select>
    ... other inputs ...
</form>

制造商输入位于主表单中,因此它可以正确显示在页面上,但它链接到部分表单,因此无需其他必需输入即可提交。

制造商的 OnChange,我将所有主要表单输入复制到隐藏表单,并在该部分表单上调用 form.submit()。当页面重新加载时,我会根据所选制造商查询我的数据库以获取型号。然后我使用 echo 将维护的值加载到 javascript 中。

echo "<script>
        var manufacturer = '';
        var model = '';
        ... other variables ...
";

if (isset($_POST['newmanufacturer']) && $_POST['newmanufacturer'])
{
    echo "manufacturer = '{$_POST['newmanufacturer']}';";
}

if (isset($_POST['partialnewmodel']) && $_POST['partialnewmodel'])
{
    echo "model = '{$_POST['partialnewmodel']}';";
}

... load other inputs into javascript ...

echo "</script>";    // <--- After this command, the webpage reloads

我不知道为什么,但是在使用最后一个回显关闭脚本后,页面会重新加载。 我在回声之前和之后添加了打印语句和控制台日志,它只返回之前的那些。 我尝试添加一个 window.stop() 命令来防止它立即重新加载,但是当我检查生成的网页时,它看起来并没有什么问题。

当它重新加载时,它会清除我发布的所有输入并将网页返回到其默认状态。

编辑 我刚刚将我的 php 代码移动到另一个文件,并将隐藏的表单操作指向新文件。这是整个新文件。

<?php
    session_start();
?>

<!DOCTYPE html>
<html>
<head>
    <title>Muh Webpage</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="icon" href="../images/favicon.svg" sizes="any" type="image/svg+xml">
</head>

<body>
    <?php
        $_POST = filter_var_array($_POST, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);

        $mysqli = new mysqli('**********', '**********', '**********', '**********');

        if ( $mysqli->connect_error ) {
            die( 'Connect Error: ' . $mysqli->connect_errno . ': ' . $mysqli->connect_error );
        }

        if (empty($_POST))
        {
            echo "<p>POST is empty</p>";
        }
        else
        {
            foreach ($_POST as $key => $value)
            {
                echo "<p>" . $key . " - " . $value . "</p>";
            }
        }

        if (isset($_POST['newmanufacturer']))
        {
            echo "<p>start of newmanufacturer handling</p>";
            $sql = "SELECT Model
                    FROM Models
                    WHERE ManufacturerName='{$mysqli->real_escape_string($_POST['newmanufacturer'])}'
                    ORDER BY Model;";
            $result = $mysqli->query($sql);

            if ($result)
            {
                $models = array();
                $i = 0;

                while ($row = $result->fetch_array())
                {
                    $models[$i] = $row['Model'];
                    $i = $i + 1;
                }

                $_SESSION['Model'] = $models;
            }
            else
            {
                echo '<p style="color: red;">ERROR ' . $mysqli->errno . ': MySQL error description=' . $mysqli->error . '</p>';
            }

            echo "<p>before scripting in newmanufacturer handling</p>";

            echo "<script>
                var location = '';
                var description = '';
                var manufacturer = '';
                var model = '';
                var serialnumber = '';
                var additionalinfo = '';
            ";
            if (isset($_POST['partialnewlocation']) && $_POST['partialnewlocation'])
            {
                echo "location = '{$_POST['partialnewlocation']}';";
            }
            if (isset($_POST['partialnewdescription']) && $_POST['partialnewdescription'])
            {
                echo "description = '{$_POST['partialnewdescription']}';";
            }
            if (isset($_POST['newmanufacturer']) && $_POST['newmanufacturer'])
            {
                echo "console.log('manufacturer loading into js');";
                echo "manufacturer = '{$_POST['newmanufacturer']}';";
            }
            if (isset($_POST['partialnewmodel']) && $_POST['partialnewmodel'])
            {
                echo "console.log('model loading into js');";
                echo "model = '{$_POST['partialnewmodel']}';";
            }
            if (isset($_POST['partialnewserialnumber']) && $_POST['partialnewserialnumber'])
            {
                echo "serialnumber = '{$_POST['partialnewserialnumber']}';";
            }
            if (isset($_POST['partialnewadditionalinfo']) && $_POST['partialnewadditionalinfo'])
            {
                echo "additionalinfo = '{$_POST['partialnewadditionalinfo']}';";
            }
            echo "console.log('done loading into js');";
            // echo "window.stop();";
            echo "</script>";
            
            echo "<script>
                console.log('never reach here');
                window.stop(); 
            </script>";
            echo "<p>Never reach here neither</p>";
        }
    ?>
</body>
</html>

这个新文件有同样的问题。除非我取消注释 window.stop() 行,否则它将立即重新加载。此文件中没有其他内容。

【问题讨论】:

  • populatemodels 是做什么的?没有 php 代码的响应是什么样的?
  • 我们很难猜出问题所在。在页面提交时,您最初设置的表单值将随着新页面的加载而消失。新代码运行......我们不知道新代码中有什么。所以我会说从注释掉很多代码开始,然后慢慢添加,直到找到确凿的证据。
  • 我什至会更进一步。如果您在每次提交时都刷新页面而不是使用 ajax,那么两种表单会使事情变得不必要地复杂化。解决这个问题可能会很好地解决当前的问题。您应该能够在生成刷新页面时填写默认值或标记选定的选项。除此之外,这些应该是GET 以供阅读; POST 用于更改存储的数据。正如您目前所拥有的那样,如果用户点击后退按钮,事情会变得一团糟......并且对用户来说非常烦人。
  • 所以......你是说当页面加载时,如果done loading into js 在控制台中,你看到的最后一件事是什么?然后它重新加载?它会再次重新加载完全相同的页面吗?刷新是 GET 还是 POST?如果您将开发人员工具设置为在请求之间保留网络日志和控制台,您可能会看到是什么触发了浏览器进行重新加载
  • var location='';...当然。而已。 locationwindow.location 的别名。我希望你不需要我告诉你那是做什么的。概念证明:jsfiddle.net/k4tanxd2。您必须将变量命名为其他名称,例如jsfiddle.net/k4tanxd2/2 。 (PS 如果您仍然按照我的建议将所有这些东西放入一个对象中(您可以轻松地使用 PHP 通过 json_encode 创建),那么无论如何都不会出现这种情况。或者只是使用 AJAX 而不是 2 种形式,如前所述建议,因此您不需要任何重新填充代码。

标签: javascript php html reload


【解决方案1】:
var location='';

是问题所在。因为它不在函数内部或其他范围内,所以这实际上是 window.location 的别名(因为 window 是基于浏览器的 JS 中的默认对象)。设置该值是指示浏览器导航到该值中指定的页面。 (如果您在本例中设置了一个空字符串,它将再次导航到当前 URL。)

这是一个展示这种行为的概念证明:https://jsfiddle.net/k4tanxd2/

您只需将变量命名为其他名称,例如:

var loc = '';

(当然,您也可以采用不涉及创建大量全局变量的不同设计方法。)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-12-03
    • 2023-04-05
    • 1970-01-01
    • 2012-08-02
    • 2015-02-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多