ajax登錄表單問題

這是我的HTML文件中的下拉式登錄框。我在後端使用快遞和護照。有沒有辦法在不重新加載整個頁面的情況下驗證密碼？同時，如何處理一些彈出消息，如：「找不到用戶名」，「不正確的密碼」..？ajax登錄表單問題

 <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Log In <span class="caret"></span></a> 
      <ul class="dropdown-menu dropdown-lr animated slideInRight" role="menu"> 
        <div class="col-lg-12"> 
         <div class="text-center"><h3><b>Log In</b></h3></div> 
          <form id="ajax-login-form" action="/login" method="post" role="form" autocomplete="off"> 

           <!-- show any messages that come back with authentication --> 
           <% if (message.length > 0) { %> 
            <div class="alert alert-danger"><%= message %></div> 
           <% } %> 

           <div class="form-group"> 
            <label for="username">Email</label> 
            <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Email" autocomplete="off"> 
           </div> 
           <div class="form-group"> 
            <label for="password">Password</label> 
            <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off"> 
           </div> 
           <div class="form-group"> 
            <div class="row"> 
             <div class="col-xs-7"> 
              <input type="checkbox" tabindex="3" name="remember" id="remember"> 
              <label for="remember"> Remember Me</label> 
             </div> 
             <div class="col-xs-5 pull-right"> 
              <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In"> 
             </div> 
            </div> 
           </div> 
           <div class="form-group"> 
            <div class="row"> 
             <div class="col-lg-12"> 
              <div class="text-center"> 
               <a href="#" tabindex="5" class="forgot-password">Forgot Password?</a> 
              </div> 
             </div> 
            </div> 
           </div> 
          </form> 
        </div> 
      </ul> 
     </li>

來源

2016-09-20 Pano

您的形式是這樣的：

     <!-- show any messages that come back with authentication --> 
        <div id="message"></div> 
        ....... 
        ....... 
        <div class="col-xs-5 pull-right"> 
        <input type="button" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In"> 
        </div>

腳本AJAX：

<script> 
$('#login-submit').click(function(){ 

    var usrnm = $('#username').val(); 
    var pwd = $('#password').val(); 
    $.ajax({  
      type:'post', 
      url:'check.php',// path to check username and pwd 
      data:{username: usrnm,password:pwd}, 
      success:function(msg){ 
       if(msg=='1'){ 
        $('#message').html(''); 
        alert('redirect to wherever u want'); 
        //window.location = 'http://example.com/username='+usrnm 
       }else{ 
       $('#message').html(msg); 
       } 
      } 
    }); 
}); 
</script>

check.php：

<?php 
$username = $_POST['username']; 
$password = $_POST['password']; 

//note:u can edit as u like. how to check 
if($username == 'admin' && $password=='admin'){ 
    echo "1"; //if success 
}elseif($username == 'admin' && $password!='admin'){ 
    echo "WRONG PASSWORD"; //fail 
}else{ 
    echo "Your Id is not Registered"; //fail 
} 

?>

來源

2016-09-20 06:08:34

<script type="text/javascript"> 
    function checkusername(){ 

    var username=$("#username").val(); // get username value on blur event 
    $.ajax({ 
     type:'post', 
      url:'checkusername.php',// path to php file that validate username 
      data:{username: username}, 
      success:function(errmsg){ 
      alert(errmsg);  
      } 
    }); 
    } 
    </script> 



<p>Username <input type="text" name="username" id="username" onblur="checkusername()" required></p>

PHP

$echeck="select username from register where username=".$_POST['username']; 
    $echk=mysql_query($echeck); 
    $ecount=mysql_num_rows($echk); 
    if($ecount!=0) 
    { 
     echo "username already exists"; 
    }

注：相同的方式，還可以在驗證密碼

來源

2016-09-20 04:33:16

ajax登錄表單問題

回答

相關問題