javascript - 当我在我的网页上提交表单时，URL 会立即更新其内容

Question

我是表单新手，复制并粘贴此示例代码作为登录代码段:

              <div class="login-form-1">
                <form id="login-form" class="text-left">
                    <div class="main-login-form">
                        <div class="login-group">
                            <div class="form-group">
                                <label for="lg_username" class="sr-only">Username</label>
                                <input type="text" class="form-control" id="lg_username" name="lg_username" placeholder="username">
                            </div>
                            <div class="form-group">
                                <label for="lg_password" class="sr-only">Password</label>
                                <input type="password" class="form-control" id="lg_password" name="lg_password" placeholder="password">
                            </div>
                            <div class="form-group login-group-checkbox">
                                <input type="checkbox" id="lg_remember" name="lg_remember">
                                <label for="lg_remember">Stay logged in?</label>
                            </div>
                        </div>

                        <button type="submit" class="login-button"><i class="fa fa-sign-in fa-2x"></i></button>
                    </div>
                </form>
            </div>

当用户点击按钮上的提交时，网页的 URL 将从:

http://localhost:52303/Src/Main/index.html

到

http://localhost:52303/Src/Main/index.html?username=whatever&password=whatever

是什么导致了这种情况，我该如何防止这种行为？

Answer 1

使用POST方法提交表单。

<form id="login-form" method="post" class="text-left">

默认情况下，它使用GET 方法，它将通过查询字符串值发送表单数据。在您的示例中，username 和 password 是两个表单字段(表单字段的名称值)，当您提交表单时将发送它们。

来自 MDN，关于 form 的 method 属性的文档，

浏览器用来提交表单的 HTTP 方法。可能的值是:

post:对应HTTP POST方式；表单数据包含在表单正文中并发送到服务器。

get:对应HTTP GET方法；表单数据附加到带有“？”的操作属性 URI作为分隔符，并将生成的 URI 发送到服务器。当表单没有副作用并且只包含 ASCII 字符时使用此方法。

通过 GET 方法提交表单数据并不理想，因为查询字符串中的字符数有限制。