how to redirect to success page through servlet using ajax?

Ronak Joshi Published at Dev

Ronak Joshi

I have a jsp page which takes user name and password and then it redirect to a servlet. Below is jsp code,

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>DeliverMe</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

        <!-- jQuery Version 1.11.0 -->
    <script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btn-login').click(function() {
        var userName = $('#userName').val();
        var password = $('#password').val();
        var datastr='userName='+userName+'&password='+ password;
        $.ajax({
            url : 'LoginCheck',
            data :datastr,
            success : function(responseText) {
                $('#ajaxGetUserServletResponse').text(responseText);
            },
        error:function(url){
            window.location = url;
          }  

        });
    });
});
</script>
</head>

</head>
<body>
  <div class="container">    
  <span style="color: #000099"><center><h2>DeliverMe Admin Panel</h2></center></span>
        <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
            <div class="panel panel-info" >
                    <div class="panel-heading">
                        <div class="panel-title">Sign In</div>

                    </div>     

                    <div style="padding-top:30px" class="panel-body" >

                        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

                        <form id="loginform" class="form-horizontal" role="form">

                            <div style="margin-bottom: 25px" class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                        <input id="userName" type="text" class="form-control" placeholder="username or email">                                        
                                    </div>

                            <div style="margin-bottom: 25px" class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                        <input id="password" type="password" class="form-control" name="password" placeholder="password">
                                    </div>


                                <div style="margin-top:10px" class="form-group">
                                    <!-- Button -->

                                    <div class="col-sm- 12 controls">
                                      <a id="btn-login"  class="btn btn-success">Login</a>


                                    </div>
                                </div>
<span id="ajaxGetUserServletResponse" style="color: red;"></span>
                            </form>     


                        </div>                     
                    </div>  
        </div>

    </div>

</body>
</html>

Then my servlet checks user name and password and if it is wrong then it gives error text but if it is true then it should be redirect to success page. But it doesn't effect. Below is servlet code,

if(db.loginCheck(userName, password))
            {
                request.getRequestDispatcher("/main.jsp").forward(request, response);
            }else
            {
                 String greetings = "Invalid Username/Password";
                 response.setContentType("text/plain");
                response.getWriter().write(greetings);

            }

Ronak Joshi

I got solution. I have changed response of my servlet like this,

if(db.loginCheck(userName, password))
            {
                response.getWriter().write("1");
            }else
            {
                 greetings = "Invalid Username/Password";
                 response.setContentType("text/plain");
                response.getWriter().write(greetings);

            }

and on my jsp page i have put this,

<script type="text/javascript">
$(document).ready(function() {
    $('#btn-login').click(function() {
        var userName = $('#userName').val();
        var password = $('#password').val();
        var datastr='userName='+userName+'&password='+ password;
        $.ajax({
            url : 'LoginCheck',
            data :datastr,
            success : function(responseText) {
                if(responseText == "1"){
                    window.location.assign("/main.jsp");
                  }else{
                      $('#ajaxGetUserServletResponse').text(responseText);
                  }
            },

        });
    });
});
</script>

Collected from the Internet

Please contact [email protected] to delete if infringement.