jQuery $.ajax() request returns empty data

Question

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>

What's Login returning? The request parameter is the data returned from the URL, it's not going to have a getResponseHeader method. — gen_Eric
– gen_Eric, Commented Dec 12, 2013 at 17:21
Welcome to SO, Please don't paste your entire HTML into the question. It makes it much easier for everyone if you just add the relevant parts — Liam
– Liam, Commented Dec 12, 2013 at 17:21

Liam · Accepted Answer · 2013-12-12 17:25:59Z

2

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.

answered Dec 12, 2013 at 17:25

Liam

30k28 gold badges143 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Spokey · Accepted Answer · 2013-12-12 17:25:32Z

1

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"));
}

answered Dec 12, 2013 at 17:25

Spokey

11k2 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery $.ajax() request returns empty data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related