顯示隱藏的div：jQuery和AJAX

我使用jQuery AJAX趕上登錄錯誤，但是當我提出一個錯誤的登錄我無法看到DIV loginError顯示隱藏的div：jQuery和AJAX

我搜索上http://api.jquery.com

我用這個例子http://hayageek.com/jquery-ajax-form-submit

這裏是我的JS：

$().ready(function() { 
    $("#loginForm").validate({ 
     rules: { 
      email: { 
       required: true 
      }, 
      password: { 
       required: true, 
       minlength: 6, 
       maxlength: 20 
      } 
     }, 
     messages: { 
      email: { 
       required: "Please provide an email" 
      }, 
      password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 6 characters long", 
       maxlength: "Your password must be at most 20 characters long" 
      } 
     } 
    }); 

    $("#loginForm").submit(function(e) 
    { 
     var postData = $(this).serializeArray(); 
     var formURL = $(this).attr("action"); 
     $.ajax({ 
      url : formURL, 
      type: "POST", 
      data : postData, 
      error: function(jqXHR, textStatus, errorThrown) { 
       $("#loginError").show(); 
      } 
     }); 
     e.preventDefault(); 
    });

當我刪除e.preventdef奧爾特（）;我可以簡單地看到這個div，但我的頁面重新加載和 DIV消失！

，這裏是我的表格：

<form class="cmxform form-signin" id="loginForm" method="POST" action=""> 
      <fieldset> 
       <div class="login-wrap"> 
        <h2 class="form-signin-heading"><?php echo lang('login.title')?></h2> 
        <div id="loginError" class="alert alert-warning" hidden="hidden"> 
         <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
         <strong>Oh snap!</strong> <?php echo lang('login.error')?> 
        </div> 
        <div class="form-group "> 
         <label class="control-label" for="femail">Email:</label> 
         <input class="form-control" type="email" id="femail" name="email" placeholder="<?php echo lang('login.email') ?>" autofocus required> 
        </div> 
        <div class="form-group "> 
         <label class="control-label" for="fpassword">Password:</label> 
         <input class="form-control" type="password" id="fpassword" name="password" placeholder="<?php echo lang('login.password') ?>" required> 
        </div> 
        <label class="control-label checkbox" for="frememberme"> 
         <input type="checkbox" id="frememberme" name="rememberme" value="rememberme"><?php echo lang('login.rememberme')?> 
         <span class="pull-right"> <a href="forget"><?php echo lang('login.forget') ?></a></span> 
        </label> 
        <button class="btn btn-lg btn-block btn-login" type="submit"><?php echo lang('login.login')?></button> 
        <a href="register"><button type="button" class="btn btn-lg btn-block btn-register"><?php echo lang('login.register')?></button></a> 
        <div class="login-social-link"> 
         <p><?php echo lang('login.joinus') ?></p> 
         <a href="index" class="facebook"> 
         <i class="icon-facebook"></i>Facebook</a> 
         <a href="index" class="twitter"> 
         <i class="icon-twitter"></i>Twitter</a> 
        </div> 
       </div> 
      </fieldset> 
     </form>

也許它來自我的笨代碼。

提前致謝！

來源

2013-11-26 Guillaume Francois

<？php echo lang（'login.error'）？>輸出？ – Sico

這裏是我的lang文件$ lang ['login.error'] =「標識符incorrects！」; –

嘗試這樣的事情

$("#loginForm").submit(function(e) 
    { 
     e.preventDefault(); 
     var postData = $(this).serializeArray(); 
     var formURL = $(this).attr("action"); 
     $.ajax({ 
      url : formURL, 
      type: "POST", 
      data : postData, 
      error: function(jqXHR, textStatus, errorThrown) { 
       $("#loginError").show(); 
      } 
     }); 
    });

來源

2013-11-27 08:51:42

我剛試過這個解決方案，但是div沒有出現 –

試試這個：

$("#loginForm").submit(function (e) { 
    var postData = $(this).serializeArray(); 
    var formURL = $(this).attr("action"); 
    $.ajax({ 
     url: formURL, 
     type: "POST", 
     data: postData, 
     success: function (response) { 
      if (response) { 
       //do stuff if login is correct 
      } else { 
       $("#loginError").show(); 
      } 

     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      //$("#loginError").show(); 
     } 
    }); 
    e.preventDefault(); 
});

注：獲取數據庫操作後響應從服務器端。並根據您的要求更改IF/ELSE條件

來源

2013-11-30 11:01:58

顯示隱藏的div：jQuery和AJAX

回答

相關問題