How to Make a Login Form using Ajax and Servlet

jsp jquery servlets

15,057

At last I am able to break it.. This is the Ajax...

<script>
    $(document).ready(function(){
       $('#login').click(function()
       {   
          var user=$('#userid').val();
          var pwd=$('#pswrd').val();
          $.ajax({
               type: "POST",
               url:"LoginServlet",
               data:{"user":user,"password":pwd},
               success: function (data) {
                  if(data=='True'){
                    $(location).attr('href','main.jsp');
                  }else{
                      alert('Fail....');
                  }
               }
             });                                
           });
         });
   </script>

And This is the servlet Response code...

if(validationFlag){                
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().write("True");
  }

15,057

Author by

Subho

Updated on June 04, 2022

Comments

Subho almost 2 years

I am new in ajax. What I was trying to do is making a login form using ajax. Means when I give username and password to my form which is made by jsp then an ajax will call and then the programe counter will go to a servlet page for Database checking. After successful DB hit it'll send a response back to the ajax. where in success part of the ajax I will call my home page. Here is my jsp Page...

 <body>
 <div class="loginContainer">
    <div class="block">
        <h3 class="blockTitle">Login</h3>
        <div class="blockContent">
            <div class="formStyle">
                <script>
                    $(document).ready(function(){
                        $('#login').click(function()
                        {   
                            var user=$('#userid').val();
                            var pwd=$('#pswrd').val();
                            $.ajax({
                                type: "POST",
                                url:"LoginServlet",   // this is my servlet
                                data:{"user":user,"password":pwd},
                                success: function (data) {
                                     // I want to call my home page from here 
                                }
                            });                                
                        });
                    });
                </script>
                <label>Username</label>
                <input type="text" id="userid"/>
                <small>(e.g. guest)</small>

                <label>Password</label>
                <input type="password" id="pswrd"/> 
                <input type="submit" value="Login" id="login"/>
            </div>
        </div>
    </div>
 </div>
</body>

Now the servlet Page....

public class LoginServlet extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    try {
        String user = request.getParameter("user");
        String password = request.getParameter("password");

        System.out.println("---->" + user);
        System.out.println("---->" + password);

        QueryBuilder qb = QueryBuilder.getInstance();
        LoginVO loginVO = new LoginVO();

        loginVO.setUserid(user);
        loginVO.setPassword(password);

        boolean validationFlag = qb.userValidation(loginVO);
        if (validationFlag) {                
             // response will send from here
        } else {

        }
    } catch (Exception e) {

        e.printStackTrace();
    }
}
}

I am able to make a successful servlet call from jsp via ajax. I am able to send the data and print them also in servlet. and It was a successful DB hit. Now Please anyone help me to send back the response to ajax... Help me...