Ajax 调用被意外触发答案

【问题标题】：Ajax call is being accidently triggeredAjax 调用被意外触发
【发布时间】：2021-10-31 11:56:32
【问题描述】：

我正在创建一个登录页面，在弹出表单的底部，有另一个按钮可以将您带到注册页面。问题似乎是，当导航到新页面时，它都位于原始登录表单下，该表单使用 ajax 调用来检查用户是否存在，因此当他们尝试提交注册表时，它会从登录表格。

登录表格

<div id="myForm">    
    <form onsubmit="return false;" id="loginForm">
        <h1>Login</h1>

        <label for="email"><b>Email</b></label>
        <input type="email" id="email" placeholder="Enter Email" name="email" required>

        <label for="psw"><b>Password</b></label>
        <input type="password" id="psw" placeholder="Enter Password" name="psw" required>
        <div id="message" class="alert-danger"></div>
        <br />
        <button type="submit" id="submit" class="btn">Login</button>
        <button type="button" class="btn cancel" onclick="closeForm();">Close</button>
    </form>
    <div class="d-inline">            
        <button class="btn-info">@Html.ActionLink("User Registration", "SignUp", "SignUp_SignIn")</button>
    </div>
</div>

那么ajax调用就是

$(document).ready(function () {
        $("form").on('submit', function (event) {
            var data = {
                'email': $("#email").val(),
                'psw': $("#psw").val()
            };
            $.ajax({
                type: "POST",
                url: 'SignUp_SignIn/CredentialCheck',
                data: data,
                success: function (result) {
                    if (result == true) {
                            $("#message").text("Login attempt was successful");
                    }
                    else {
                            $("#message").text("Email/Password didn't match any results");
                    }
                },
                error: function () {
                    alert("It failed");
                }
            });
            return false;
        });
    });

【问题讨论】：

页面上有多少个表格？而这个$("form").on('submit') 绑定了所有的表单。
我相信这个问题发生在 @Html.ActionLink返回a 标签。如果默认情况下您没有在按钮中添加类型属性，则考虑submit type。
您能否分享整个页面以及造成问题的注册表单？

标签： ajax asp.net-mvc

【解决方案1】：

查看 cmets 后，我意识到登录表单是从 layout.cshtml 调用的原因，因此当调用 ajax 调用时，它会抓取已加载的任何页面上存在的所有表单标签。更改 ajax 后，它为登录表单调用特定的 id 而不是 form，它允许执行适当的操作。

我拒绝的一个例子

$(document).ready(function () {
        $("form").on('submit', function (event) {            
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                success: function (result) {
                    //Do stuff
                }
            });
        });
    });

上面将尝试在提交任何已加载的表单时重定向您，但如果我们通过并更改它访问表单的方式，如下所示，那么它仅在提交一个特定表单时才有效。

$(document).ready(function () {
        $("#loginForm").on('submit', function (event) {            
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                success: function (result) {
                    //Do stuff
                }
            });
        });
    });

【讨论】：