Unable to get value in Ajax response

Question

The servlet which receives request --

     Gson gson = new Gson(); 
    JsonObject myObj = new JsonObject();
    LoginBean loginInfo = getInfo(userId,userPwd);
    //System.out.println("00000000-----------"+loginInfo.userId);
    JsonElement loginObj = gson.toJsonTree(loginInfo);
    if(loginInfo.getUserId() == "GUEST!"){

        myObj.addProperty("success", false);
    }
    else {

        myObj.addProperty("success", true);
    }
    myObj.add("login", loginObj);
    System.out.println(":::::"+myObj.get("success"));
    out.println(myObj.toString());
    out.close();

Here is the js file -----

function loadScript(url, callback)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
head.appendChild(script);
}
    loadScript("js/json2.js", myJSCode);
    var myJSCode = $(document).ready(function() {

$("#loginForm").submit(function(e){
       e.preventDefault();
});


$("#login").click(function(e){


        dataString = $("#loginForm").serialize();


        var id = $("input#id").val(); 
        var pwd = $("input#pwd").val();
        dataString = "id=" + id + "&pwd="+pwd;

        $.ajax({
            type: "POST",
            url: "login",
            data: {
                id : id,
                pwd : pwd
            },

            dataType: "json",


            success: function( data, textStatus, jqXHR) {
                 if(data.success){
                     $("#ajaxResponse").html("");
                     $("#ajaxResponse").append("<b>Welcome</b> " + data.login.id + "<br>");
                     //alert("#ajaxResponse" + data.login.id);
                     alert(data['id']);   
                     alert(data['pwd']);

                 } 

                 else {
                     $("#ajaxResponse").html("<div><b>Login Credentials are invalid!</b></div>");
                 }
            } 
 });     

I am getting the ajaxResponse if I am going with 1 element ie 'id' but when I tried to get both the response I am getting value as undefined. I have tried with data.login.id & data[id] but unable to get desired output. Any help will be appreciated. Even I have tried with JSON.Stringify().

Answer 1

     $.ajax({
                type: "POST",
                url: "login",
                data: {
                    id : id,
                    pwd : pwd
                },
...

This has data passed to ajax is not the same as the data in

    success: function( data, textStatus, jqXHR) {
                     if(data.success){
...

In this success callback data is response from the server and it has a different (or same structure) based on data that server returns to you. if you want to print the value from ajax call, you need to use just id

$("#ajaxResponse").append("<b>Welcome</b> " + id + "<br>");

I see you are trying to use "data.login.id" can you check what is real structure of data in response? add console.log(data) or put breakpoint that callback, or simple add debugger; code, it will stop code in that line for you without adding breakpoint.

Answer 2

Thanks Alex. I will give you +1 for the line

  $("#ajaxResponse").append("<b>Welcome</b> " + id + "<br>");

Though it is working when I use:

      data: {

                id: $('#id').val(),
                pwd: $('#pwd').val()
            },

Without changing my code to this one the line was not working. Thanks for the suggestion.