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