javascript - 使用jquery的登录页面不重新提交

Question

问题在于，在登录页面上，提交错误的条目后，按提交后不会再次执行 ajax 请求。

我通过 StackExchange 寻找问题的答案，并查看了诸如 Why won't my jQuery form resubmit? 之类的链接。和 jQuery & AJAX login form以及其他十几个。看起来我需要取消绑定(bind)提交的变量，但不知道如何执行此操作。

HTML

<div data-role="page" id="login">
  <div data-role="header" data-position="inline" data-theme="b">    
    <h1>My login</h1>
  </div><!-- /header -->
  <div data-role="content">
    <form method="post" id="loginform">
        <label for="username">Username:</label> <input type="text" name="username" id="username" value=""  />
        <label for="passwd">Password:</label> <input type="password" name="passwd" id="passwd" value=""  />
        <input type="submit" value="Login" />
    </form>
  </div><!-- /content -->
</div><!-- /login page -->

JavaScript:

$(document).ready(function() { 
  $("#loginform").on('submit',function(event){
    var $form = $(this),
      serializedData = $form.serialize();

    // fire off the request to /form.py
    $.ajax({
      url: "https://mywebsite/cgi-bin/form.py",
      type: "post",
      data: serializedData,

      // callback handler that will be called on success
      success: function(response, textStatus, jqXHR){
        console.log(response);
        // If login is unsuccessful, log message and return to login screen again
        if (response == "INVALID_USER\n") {
          alert("sorry, try again");
        } else {
          // Login successful - do something
        }
      },

      // callback handler that will be called on error
      error: function(jqXHR, textStatus, errorThrown){
        console.log(
          "The following error occured: "+
            textStatus, errorThrown);
      },

      // callback handler that will be called on completion
      // which means, either on success or error
      complete: function(){
        //----- DO I NEED TO UNBIND SOMETHING HERE?
        var dummy = 1;
      }
    }); // end of ajax call
}); // end of submit handler
});

Answer 1

您是否会尝试在事件处理程序末尾添加return false？使用 return false 可以防止事件触发并阻止用户在未填写正确的必填字段的情况下继续操作。

$("#loginform").on('submit',function(event){

    ...

    return false;
});

服务器返回什么数据类型？例如，如果服务器返回 JSON，那么您应该在 AJAX 代码中添加 dataType: 'json'。如果未指定，jQuery 将尝试根据响应的 MIME 类型来推断。

也许你可以使用firebug看看是否有错误发生。