1

問題は、ログインページで、間違ったエントリが送信された後、送信を押してもajaxリクエストが2回実行されないことです。

私は自分の質問に対する答えをStackExchangeで探し、「jQueryフォームが再送信されないのはなぜですか？」などのリンクを調べました。そして、jQueryとAJAXのログインフォームは他にもたくさんあります。送信された変数のバインドを解除する必要があるようですが、これを行う方法がわかりません。

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
});
4

1 に答える 1

1

return falseイベント ハンドラーの終了前に追加してみますか? return false を使用すると、イベントの発生を防ぎ、ユーザーが正しい必須フィールドに入力せずに先に進むのを防ぎます。

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

    ...

    return false;
});

さらに、サーバーから返されるデータ型は何ですか? たとえば、サーバーが JSON を返す場合はdataType: 'json'、AJAX コードを追加する必要があります。何も指定されていない場合、jQuery は応答の MIME タイプに基づいて推測しようとします。

おそらく、firebugを使用して、エラーが発生するかどうかを調べることができます。

于 2013-01-01T08:37:51.400 に答える