html 解决表单提交时调用jquery ajax出现执行了请求，但进入了error方法里面

本文链接：https://blog.youkuaiyun.com/qq_33786284/article/details/70228321

本文介绍了一个关于使用Form表单与Ajax进行登录请求时出现的问题及解决方案。当使用Form表单时，由于表单本身的提交机制与Ajax请求发生冲突，导致请求总是进入error回调。通过将Form标签替换为Div标签，可以避免这种冲突，实现正常的登录功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<form class="form">
    <div class="loginTop">
        <img src="<%=path%>/images/logo.png" alt="平安银行"  />
        <span>LOGIN</span>
    </div>
    <div class="user">
        <label for="UserName">
            用户名：
        </label>
        <input type="text" id="UserName" placeholder="请输入用户名"/>
    </div>
    <div class="pass">
        <label for="Password">
            密码：
        </label>
        <input type="password" id="Password" placeholder="请输入密码"/>
    </div>
    <div class="remenber">
        <span class="showBtn"></span>
        <input type="checkbox" id="Remenber" name="remenber" class="remenBox"/>
        <label class="remenLable" for="Remenber">记住密码</label>
    </div>
    <div class="btn">
        <button onclick="subMit()" class="loginBtn">登录</button>
    </div>
</form>

function subMit() {
    var user = $('#UserName').val();
    var word = $('#Password').val();
    $.ajax({
        url: "<%=path%>/user/login",
        data:{"username":user,"password":word},
        type: "GET",
        async: false,
        dataType: "json",
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        success: function (data) {
            console.log("成功");
            window.location.href = "<%=path%>/user/index";
        },
        error: function (XMLHttpRequest) {
            //这个error函数调试时非常有用，如果解析不正确，将会弹出错误框
            alert(XMLHttpRequest.responseText);
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
        }
    })
}
这样的请求会一直执行error方法，导致得不到想要的结果！！！

把form标签改为div标签，就可以完美解决问题，造成的原因应该是form表单会提交一次数据，ajax请求也会，

导致请求冲突，响应失败