Currently I have a login form that will send JSON data (username and password) to my api server and the server will send back JSON data (username and balance) back to my webpage.

My HTML Code:

<input type="text" name="username" id="username" class="text" maxlength="30" />
<br />
<input type="password" name="password" id="password" class="text" maxlength="30" />
<br />
<input type="submit" name="btnSubmit" id="btnSubmit" />

My jQuery Script:

    $(document).ready(function () {
    $("#btnSubmit").click(function () {
        //collect userName and password entered by users
        var userName = $("#username").val();
        var password = $("#password").val();

        auth(userName, password);
    });
});

//authenticate function to make ajax call
function auth(userName, password) {
    $.ajax
    ({
        type: "POST",
        //SEND TO MY SERVER URL
        url: "http:myserverlocationurl",
        dataType: 'json',
        async: false,
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function () {

            //???????????????????????
        }
    })
}

My question has to do with the '??????????' listed above. How do I encapsulate/display the json data that is being sent back from the server and onto my webpage (either as a popup -- but ANYTHING would work as long as I can see it).

Thank you and any help would be much appreciated.

Currently I have a login form that will send JSON data (username and password) to my api server and the server will send back JSON data (username and balance) back to my webpage.

My HTML Code:

<input type="text" name="username" id="username" class="text" maxlength="30" />
<br />
<input type="password" name="password" id="password" class="text" maxlength="30" />
<br />
<input type="submit" name="btnSubmit" id="btnSubmit" />

My jQuery Script:

    $(document).ready(function () {
    $("#btnSubmit").click(function () {
        //collect userName and password entered by users
        var userName = $("#username").val();
        var password = $("#password").val();

        auth(userName, password);
    });
});

//authenticate function to make ajax call
function auth(userName, password) {
    $.ajax
    ({
        type: "POST",
        //SEND TO MY SERVER URL
        url: "http:myserverlocationurl.",
        dataType: 'json',
        async: false,
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function () {

            //???????????????????????
        }
    })
}

My question has to do with the '??????????' listed above. How do I encapsulate/display the json data that is being sent back from the server and onto my webpage (either as a popup -- but ANYTHING would work as long as I can see it).

Thank you and any help would be much appreciated.

• javascript
• jquery
• json

• 1 Depends on what the response looks like.. In generic terms, you could alert the information, or create DOM elements containing the info and add them to the page. As a side note, it's generally not a good idea to build json strings by concatenating strings. Create a javascript object, then call JSON.stringify() if you need to. – Jason P Commented Jan 21, 2014 at 16:34
• Can I get an example of how to do that? How to use stringify()? I am new to JSON. Also I want my response to just be simple alert. BUT i don't know how to do that :( – user3196499 Commented Jan 21, 2014 at 16:36
• 1 In that case, I would start here. – Jason P Commented Jan 21, 2014 at 16:38
• ok i will definitely check that out. thanks. But do you have suggestions on how to display the responding json data from the API server? – user3196499 Commented Jan 21, 2014 at 16:41
• If you're only concerned with looking at the data, you could use the network tab of your browser's dev tools, or use console.log() to log the response in the success callback. There is an example on the second section of the link I posted that shows how to write json to the page. Keep in mind though, that your json structure will almost definitely be different than the example. learn.jquery./ajax/jquery-ajax-methods – Jason P Commented Jan 21, 2014 at 16:45

3 Answers 3

$.ajax
({
    type: "POST",
    //SEND TO MY SERVER URL
    url: "http:myserverlocationurl.",
    dataType: 'json',
    async: false,
    data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
    success: function (jsonResponse) {

        resp = parseJSON(jsonResponse);

        alert(resp);
    }
})

The success function es with three parameters, data, textStatus, and jqXHR which are explained in the jQuery API site:

success

Type: Function( PlainObject data, String textStatus, jqXHR jqXHR ) A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.

To see the results from the ajax call, you can use console.log() to view the contents of the arguments:

    success: function (data, textStatus, jqXHR) {
          console.log(data);
          console.log(textStatus);
          console.log(jqXHR);
    }

To add the contents of the JSON response to your site - it depends on how it is formatted. If your response returns something like: {"user": "jsmith", "authentication": "success"}, then you can alert the user:

    success: function (data, textStatus, jqXHR) {
          alert('User: ' + data.user + ' authenticated:' + data.authentication);
    }

Or add it to some DOM element on your page, i.e. a div with an id of login-status:

    success: function (data, textStatus, jqXHR) {
          $('#login-status').html('User: ' + data.user + ' authenticated:' + data.authentication);
    }

function auth(userName, password) {
    $.ajax
    ({
        type: "POST",
        //SEND TO MY SERVER URL
        url: "http:myserverlocationurl.",
        dataType: 'json',
        async: false,
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function (response) {
          alert(JSON.stringify(response));
        }
    })
}

You can simply alert the data for your self to see it.