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

我不熟悉表单，复制并粘贴了登录代码段的示例代码：

              <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将从以下位置更改：

到

---

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

使用

POST

方法提交表单

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

默认情况下，它使用

GET

方法，该方法将通过查询字符串值发送表单数据。在您的示例中，

username

和

password

是两个表单字段（表单字段的名称值），它们在您提交表单时被发送

来自MDN，关于

表单

的

方法

属性的文档

浏览器用于提交表单的HTTP方法。可能的值为：

post：对应于HTTP post方法；表单数据包含在表单主体中并发送到服务器

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

---

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

提交表单时会发生这种情况，表单详细信息（即文本框或任何其他控件）会被发布

查看此链接以获取更多答案

---

GET是默认的表单

方法

，因此它使用给定的表单字段作为参数发出GET请求。@Pipeline，了解GET和POST参数。但是，在不理解和处理登录数据的情况下复制代码片段会导致灾难。