jQuery ajax第二貼

Question

當我第一次點擊提交按鈕時，這些代碼有效。但是，當我第二次點擊按鈕時，即使電子郵件和密碼值爲真，也不會發生任何事情，並且用戶無法登錄。但是如果我第一次寫出真實值，它就可以工作，用戶可以登錄。所以我覺得這個問題的原因是關於「返回假」的原因。短語。但如果我刪除返回false;短語，表單帖子和ajax代碼變得毫無用處。我必須避免沒有Ajax的發佈。 jQuery的：

<script> 
    $(document).ready(function(){ 
    $('#submit-btn').click(function(){ 
     var email = $('#email').val(); 
     email = $.trim(email); 
     var password = $('#password').val(); 
     password = $.trim(password); 

      if(email == "") { 
       $('#email').css({ 
        "background-color": "#FF7070" 
       }); 
       $('#box1').css({ 
         "visibility": "visible" 
       }); 
       return false; 
      }else if(password == "") { 
       $('#password').css({ 
        "background-color": "#FF7070" 
       }); 
       $('#box2').css({ 
         "visibility": "visible" 
        });    
       return false; 
      }else{ 

        $.ajax({ 
        type: "POST", 
        url: "ajax.php", 
        data: $('#loginform').serialize(), 
        timeout: 5000, 
        success: function(c) { 
         if(c == "no") { 
          $('#box3').css({ 
           "visibility": "visible" 
          }); 
          return false; 
         } else if (c == "ok") { 
          window.location.href = "homepage.php"; 
         } 
        }, 
        error: function(a, b) { 
         if (b == "timeout") { 
          alert("Error: #101"); 
         } 
        }, 
        statusCode: { 
         404: function(){ 
          alert("Error: #102") 
         } 
        } 
        }); 
      } 
      return false; 
    }) 
}); 
</script> 

HTML：

<form name="loginform" id="loginform" method="post" action=""> 
      <div class="field"> 
       <input type="text" maxlength="40" id="email" name="email" placeholder="E-mail"> 
      </div> 

      <div class="field"> 
       <input type="password" id="password" name="password" placeholder="Password" autocomplete="off"> 
      </div> 

      <div class="field"> 
       <input type="submit" id="submit-btn" value="Log in"> 
      </div> 

      <div class="keep-login"> 
       <label for="remember"> 
        <input type="checkbox" name="remember" id="remember" checked="checked">Remember me 
       </label> 
       <span><a href="#">Forgot password?</a></span> 
      </div> 
</form> 

PHP：

if(Input::exists()) { 
    if(Token::check(Input::get('token'))) { 

     $validate = new Validate(); 
     $validation = $validate->check($_POST, array(
      'email' => array('required' => true), 
      'password' => array('required' => true) 
     )); 

     if($validation->passed()) { 
      $user = new User(); 

      $remember = (Input::get('remember') === 'on') ? true : false; 
      $login = $user->login(Input::get('email'), Input::get('password'), $remember); 

      if($login) { 
       echo "ok"; 
      } else { 
       echo "no"; 
      } 

     } else { 
      echo "no";  
     } 
    } 
} 

Answer 1

首先，刪除形式元件的製造方法和動作的屬性。你可以完全刪除表單標籤，但如果你想支持非JavaScript提交，你需要表單標籤（但是，原始問題沒有要求這樣）。您是通過jQuery「提交」表單的，因此您不需要表單標記上的方法和操作。

輸入類型=「密碼」從不autocompletes，所以你不需要該屬性。

我還加了一個錯誤div。這是你的新的HTML：

<div id="error" style="display: none;">Login failed.</div> 
<form> 
<div class="field"> 
    <input type="text" maxlength="40" id="email" name="email" placeholder="E-mail"> 
</div> 

<div class="field"> 
    <input type="password" id="password" name="password" placeholder="Password"> 
</div> 

<div class="field"> 
    <input type="submit" id="submit-btn" value="Log in"> 
</div> 

<div class="keep-login"> 
    <label for="remember"> 
     <input type="checkbox" name="remember" id="remember" checked="checked">Remember me 
    </label> 
    <span><a href="#">Forgot password?</a></span> 
</div> 
</form> 

以$。員額語句來替換你的$就發言，只是你的邏輯。

$.post("ajax.php", { e: email, p: password }, function (data) { 
    if (data == "ok") window.location.href = "homepage.php"; 
    else $("#error").slideDown().delay(3000).slideUp(); // I added div#error with "Failed to Login" message in the html above 
}); 

如果返回的數據是「OK」此代碼將現在重定向;否則，它會顯示div＃錯誤（同樣，這是在上面的html中），延遲3秒，然後隱藏消息。

的return false;是在上面的代碼中不必要的每個實例，因爲之後每個條件，該代碼結束 - 有沒有其他代碼執行，以防止（這就是爲什麼你會在這種情況下使用return false;）。

您可以在分配變量的同一行上執行$ .trim，就像我對slideUp，delay和slideDown所做的那樣。