填充最后一个输入时，JQuery ajax 调用失败

Posted 2023-03-12

【中文标题】填充最后一个输入时，JQuery ajax 调用失败

【英文标题】：JQuery ajax call fails when last input is filled

【发布时间】：2013-03-10 04:27:00

【问题描述】：

这里是 JQuery 菜鸟，

我正在开发一个简单的网络应用程序，它需要将注册信息发送到服务器。 出于某种原因，当仅填写两个表单输入时，此代码可以正常工作，但当最后一个输入中有信息时，即使我没有在代码中使用它，它也会失败。错误回调被调用，但 errorThrown 为空。我的服务器没有收到任何数据。

这有什么明显的问题吗？

注意：填写最后一个输入时调用失败，无论表单中有多少输入。

jQuery:

$(document).ready(function() 
     $("#registrationForm button.register").on("click", function(event) 
        var params = 
            email: $("#registrationForm input.email").val(),
            password: $("#registrationForm input.password").val()
        ;

        $.ajax(
        url: "/register",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(params),
        dataType: "json",
        success: function(data, textStatus, jqXHR) 
            console.log(data);
            if(data.user_exists==true)
            
                alert("Stop trying to register twice!");
            else
                window.location.href = "/registered";
            
        ,
        error: function(jqXHR, textStatus, errorThrown) 
            console.error("Error:", errorThrown);
        
    );
  );
);

还有 html：

<form id="registrationForm">
    <label>Email:</label>
    <input name="user[email]" type="text" required="required" class="email">
    <br>
    <label>Password:</label>
    <input name="user[password]" type="password" required="required" class="password">
    <br>
    <label>Verify Password:</label>
    <input name="nothing" type="text" required="required">
    <br>
    <button onclick="" class="btn btn-default register">Register</button>
</form>

【参考方案1】：

除非您另外指定，否则表单内的按钮将在单击时提交表单。在click 函数中，输入event.preventDefault() 以阻止此默认操作发生。有关详细信息，请参阅 jQuery 文档here。