ajax登录表单问题

Question

This is the dropdown Login box in my HTML file. I use express and passport at back end. Is there a way to verify the password without reloading the whole page? At the same time, how to handle some pop up messages like: "no username found", "incorrect password"..?

        <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>

Answer 1

<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";
   }

Note: same way you can also the verify the password

Answer 2

your form be like this :

                     <!-- 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>

script 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
}

?>