网页在 javascript 关闭时错误地重新加载

Question

尝试根据制造商的 selection 创建具有动态 selection 型号的网页，仅使用 php mysql 查询（即没有 jQuery 或 AJAX）。用户将 select 制造商，提交表格，网页将重新加载所有用户输入和新填充的 selection 型号字段。

我有 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 of the manufacturer，我将所有主表单输入复制到隐藏表单，并在该部分表单上调用 form.submit()。当页面重新加载时，我根据 selected 制造商在我的数据库中查询型号。然后我使用 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

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

重新加载时，它会将我发布的所有输入内容和 returns 网页清除到默认状态。

EDIT 我刚刚将我的 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() 行，否则它将立即重新加载。此文件中没有任何其他内容。

Answer 1

var location='';

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

下面是展示此行为的概念证明：https://jsfiddle.net/k4tanxd2/

您只需要将变量命名为其他名称，例如：

var loc = '';

（或者您当然可以采用不涉及创建大量全局变量的不同设计方法。）

网页在 javascript 关闭时错误地重新加载

Webpage wrongfully reloads on javascript close

javascript

php

html

reload