CODEWITHSUNDEEP
javascriptajaxjquery
Grzegorz Sendra
Grzegorz Sendra

Reputation: 39

jQuery $.ajax() request returns empty data

I have a simple login page that sends the login information to the servlet, and in response receives one parameter which is interpreted in jQuery.

Data is sent correctly, goes to the servlet which also sets the parameter correctly (I can see that in the Firebug in the response header).

The problem is when I want to retrieve data from the returned response and assign it to a JavaScript variable. The request object is empty, while in Chrome inspect I see an alert:

Uncaught TypeError: Object has no method 'getResponseHeader'.

When I display it using console.log () does not return anything to me, no value.

<!DOCTYPE html>
<html lang="en">
<head>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<link
    href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/lib/bootstrap.min.css"
    rel="stylesheet">
<link
    href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/lib/bootstrap-responsive.min.css"
    rel="stylesheet">
<link
    href="http://minikomi.github.io/Bootstrap-Form-Builder/assets/css/custom.css"
    rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="../js/jquery.validate.js"></script>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Logowanie</title>

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

<!-- Custom styles for this template -->
<link href="../css/signin.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="container">

        <form class="form-signin" action="Login" method="post">
            <h2 class="form-signin-heading">Logowanie</h2>

            <input type="email" name="email" class="form-control" id="email"
                placeholder="Adres email" autofocus>


                 <input type="password" id="password"
                name="password" class="form-control" placeholder="Haslo">


        </form>
        <button id="zaloguj" value="zaloguj" class="btn btn-success btn-large">
            <i class="icon-white icon-th-list"></i>Zaloguj
        </button>

    </div>
    <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    <script type="text/javascript">

        $('#zaloguj').click(function() {
            var email = $("#email").val();
            var password = $("#password").val();

            console.log(email+password);
            var data = "email=" + email + "&password=" + password;
            $.ajax({
                url : "Login",
                type : "POST",
                data : data,

                success : function(request) {
                    console.log(request);
                    var log = request.getResponseHeader("log");
                    console.log(log);                   

                    if (log == 1) {

                        $( ":header" ).after("Poprawne logowanie").css({ background: "#ccc", color: "green" });
                        document.location.href = '/landing.html';
                    } else {
                        $( ":header" ).after("Błędne logowanie").css({ background: "#ccc", color: "red" });
                    }
                },

            });

        });
    </script>
</body>
</html>

Upvotes: 0

Views: 2927

Answers (2)

Liam
Liam

Reputation: 29654

Looks like your using the wrong overload for success.

success : function(request) {
   console.log(request);
   var log = request.getResponseHeader("log");

should be:

success : function(data, status, xhr) {
   console.log(data);
   var log = xhr.getResponseHeader("log");

See the docs

success Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )

Then

The jqXHR Object

The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of jQuery 1.5 is a superset of the browser's native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method.

Upvotes: 2

Spokey
Spokey

Reputation: 10994

The success function returns ( PlainObject data, String textStatus, jqXHR jqXHR ). What you are looking for is the last parameter and not the response itself.

success: function(request, status, xhr) { 
    console.log(xhr.getResponseHeader("log"));
}

Upvotes: 1

Related Questions