Calling Servlet with jquery

Question

I have following requirement

on Login.html page - Login btn and Forget password btn
if Login btn click,
username and pswd text field validation should be done.
If validation success - call LoginServlet
If LoginServlet validate user successfully -> call another DashboardServlet
If LoginServlet validate user is failed --> return failure message to login.html page and login.html page should show alert or message.
What is working? - empty text box validation working, I can find which btn is clicked login or forgot password.
I am not using jsp page, so please suggest solution which works with html.

I am struggling to find solution from last 3 days, I have already refereed SO and other portals help taken but still lacking final output

Login.html

<script>
function validateloginform() {
var name = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (name == null || name == "") {
    alert("Please enter valid userName");
    return false;
} else if (password.length < 6) {
    alert("Password must be at least 6 characters long.");
    return false;
}else
    {return true;
    }
}
$(document).ready(function(){
    // Set a variable, we will fill later.
    var value = null;

// On submit click, set the value
$('input[type="submit"]').click(function(){
    value = $(this).val();
});

// Use the set value in the submit function
$('form').submit(function (event)
{
    event.preventDefault();
    //alert(value);
    if(value == "LOGIN")
        {
        if (validateloginform()){
            alert('i want to call LoginServlet here');
        }
    else if (value == "FORGOT PASSWORD")
        window.location.href = "ChangePassword.html"

});});//ready function
</script>

</head>
 <body background="../Images/zebra_background.jpg">
        <p id="header"> ZMC Server</p>
        <div class="combine">
        <img class="logo" src="../Images/zebra_logo.png"><br>
        <text>Welcome To</text>
        <text1>Admin Console Login Page </text1>
   <!-- onsubmit="return validateloginform();" -->
    <form action="/zmcwebadmin/loginServlet" method="post" 
         id="loginForm" name="loginform"> <!-- </form> -->

        <div class="usernameformat">
            <input type="text" name="username" class="userformat" id="username"
                placeholder="User Name"> <br> <input type="password"
                name="password" id="password" class="passformat" placeholder="Password">
        </div>

        <p class="rememberme">
            Remember me <img id="remember_me" onclick="changeRememberImage()"
                src="../Images/remember_me_off.png" width="28" height="20"
                style="float: right">
        </p><br>

        <input type="submit" class="buttonformat" value="LOGIN" id="btnlogin" name="btnlogin">

         <input
            type="submit" class="buttonformat" value="FORGOT PASSWORD" id="btnforgetpwd" name="btnforgetpwd">
    </form>

LoginServlet

/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
public LoginServlet() {
    super();
    // TODO Auto-generated constructor stub
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("I am in doGet of LoginServlet");
    response.sendRedirect("/html/Loginpage.html");
}
/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("I am in doPost of LoginServlet");
    String userName = request.getParameter("username");
    String passWord = request.getParameter("password");

    if(LoginDao.validate(userName, passWord))
    {
        HttpSession session=request.getSession();  
        if(session.isNew())
           {
            //New session creation
              session=request.getSession(true);
           }
            else
            {
               session = request.getSession(false);
            }

         //setting attribute on session
         session.setAttribute("userName",userName);
         //send request to Welcome.jsp page
         //response.sendRedirect("/Dashboard.html");
         response.sendRedirect("/zmcwebadmin/dashBoardServlet");
         response.getWriter().write(String.valueOf(userName));
         System.out.println("I have connected to DB");
    }

    else
    {
        //response.sendRedirect("error.html");
        String data = "User name and password do not match";
        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(data);
        /*RequestDispatcher rd = request.getRequestDispatcher("Loginpage.html"); -- This solution works
        rd.forward(request, response);*/
        //response.sendRedirect("Loginpage.html");

        request.setAttribute("error", "Unknown login, try again");
        doGet(request, response);

        System.out.println("I have not connected to server");
    }
 }
}

use xhr/ajax call for submitting the form ,and validate using the existing servlet .And if username and password is correct redirect form client side. this link mght be helpfull (Submitting forms: xhr.send(FormData)) ..http://www.html5rocks.com/en/tutorials/file/xhr2/ — damitj07, Mar 22 '16 at 10:24
@damitj07 Thanks for the comment. I can send data via ajax query but my concern is sending password field in 'data' part in ajax call. — School Boy, Mar 22 '16 at 10:35
http://stackoverflow.com/questions/4101440/jquery-sending-password-via-ajax — damitj07, Mar 22 '16 at 10:39

score 2 · Accepted Answer · answered Mar 22 '16 at 10:43

Based on your statement, I would assume steps 1-3 are working and what you actually are asking for help with is step 4. In that case, what you are looking for seem to be an ajax request to the servlet, something like

$.ajax({
  method: "POST",
  url: "/loginServlet",
  data: { username: "username", password: "password" }
})
.success(function(){
  //do success stuff
})
.error(function(){
  //do error handling stuff
});

If the user validation turns out a success, you can just redirect in the servlet, using something like

response.sendRedirect(targetUrl);

It may be useful for your development to read up a bit on the jQuery.ajax function. It's quite good to know.

http://api.jquery.com/jquery.ajax/

Also, if you want to cancel the submit behaviour, it may be preferable to use click instead of submit, i.e. change button type to button instead of submit and either add onclick to the button markup or through jQuery.

score 0 · Answer 2 · edited May 23 '17 at 12:07

Hi just add this method after form validation

 function sendForm() {
  var isUserValid =false;
  var name = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  var formData = new FormData();
  formData.append('username', name);
  formData.append('password', password);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/zmcwebadmin/loginServlet', true);
  xhr.onload = function(e) { 

        if(this.data == name){
          isUserValid =true;
           window.location.replace("http://myapp/DashboardServlet");
         }else{
          isUserValid =false;
           alert("User name and password do not match");
         }
      };

  xhr.send(formData);
 }

For adding extra layer of security you can refer this.

Calling Servlet with jquery

2 Answers2