输入字段作为 <form> 破坏了我的ASP.NET应用程序

Question

对于我的ASP.NET Web应用程序，我有一个非常简单的登录页面，该页面具有用于输入电子邮件地址和密码的输入字段。 单击“登录”按钮将调用“ app.js”文件中的“ login_user（）”函数。

@section Scripts {
  @Scripts.Render("~/bundles/app")
 }

 <div class="row">
     <h3>Log In</h3>
        <label>User Name</label>
        <input class="form-control" type="text" autocomplete="on" id="loginEmail" />

        <label>Password</label>
        <input class="form-control" type="password" id="loginPassword" />

       <button onclick="login_user()" class="btn btn-default">Log In</button>
 </div>

login_user（）函数：

function login_user() {
    var UserName = $('#loginEmail').val();
    var PassWord= $('#loginPassword').val();

    var loginData = {
        grant_type: 'password',
        username: UserName,
        password: PassWord
    };

    var TokenEndPoint = baseUrl.concat('Token');
    $.post(TokenEndPoint , loginData,
    function (data) {
        // Cache the access token in session storage.
        sessionStorage.setItem(tokenKey, data.access_token);
        localStorage.setItem(userKey, data.userName);
        // Now we have the token we can setup the header for each subsequent call
        $.ajaxSetup({
            headers: {
                'Authorization': 'Bearer ' + data.access_token
            }
        });
    }).fail(showFailToLogin);

}

工作正常，唯一的缺点是浏览器不会记住用户名和密码。 我以为'autocomplete =“ on”'会解决这个问题，但这不起作用。 一项小小的研究表明，仅当输入字段是表单的一部分时，此方法才有效。
但是，如果在输入周围添加<form>..</form>标记，则我的应用程序将不再起作用。 当我单击“登录”按钮时，它不再调用login_user（）函数，而是将表单数据发送到ASP.NET服务器。 而且由于没有对此进行设置，因此它仅返回空的登录页面，您陷入了无休止的循环。
我想这与表单控件的默认“提交”操作有关，但是我无法找到如何阻止它的方法。

Answer 1

问题似乎是您没有覆盖html表单标签的任何默认发布方法。 它只是提交表单，而不提交给您想要的所需方法。 您可以阅读下面的链接，以了解相同的信息，也可以点击此链接进行FORM METHODS

Answer 2

解决方案是将表单中的按钮明确标记为“按钮”
所以这按预期工作：

<button type="button" onclick="login_user()" >Log In</button>

根据规范，按钮的默认类型为“提交”
请参阅： https ： //www.w3.org/wiki/HTML/Elements/button
（感谢Dean.DePue将其添加到评论中）