Log in authentication using Jquery and Json

Question

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.com",
        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.

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
– 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
– user3196499, Commented Jan 21, 2014 at 16:36
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
– 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.com/ajax/jquery-ajax-methods — Jason P
– Jason P, Commented Jan 21, 2014 at 16:45

Gjohn · Accepted Answer · 2014-01-21 16:53:34Z

1

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

        resp = parseJSON(jsonResponse);

        alert(resp);
    }
})

answered Jan 21, 2014 at 16:53

Gjohn

1,2811 gold badge8 silver badges12 bronze badges

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

Comments

rafiki_rafi · Accepted Answer · 2014-01-21 16:43:06Z

0

The success function comes 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);
    }

edited Jan 21, 2014 at 16:43

answered Jan 21, 2014 at 16:35

rafiki_rafi

1,2372 gold badges12 silver badges27 bronze badges

11 Comments

user3196499 Over a year ago

Thank you for your reply. So if I use the success function that you mentioned above, will the data show up on the webpage for the user to see??

user3196499 Over a year ago

I don't think Console is neccessary because I am 100% sure the server is sending back JSON data. I just need a way to display the JSON data response onto the login-webpage (via Popup/Alert).

user3196499 Over a year ago

THanks a lot. I will definitely try it out.

user3196499 Over a year ago

What if its nested JSON object? So something like: {"info": {"user": "","balance": ""},} Would I use: success: function (data, textStatus, jqXHR) { alert('User: ' + data.info.user + ' balance:' + data.info.balance); } I really appreciate the help. I spent almost 5 days thinking and looking for a method.

rafiki_rafi Over a year ago

Yes, but if the structure of the JSON object were to change, then data.info.user and data.info.balance would evaluate to undefined variables, resulting in a ReferenceError runtime error. I would urge you to read up on JSON.

|

gauravmuk · Accepted Answer · 2017-06-18 18:52:58Z

0

function auth(userName, password) {
    $.ajax
    ({
        type: "POST",
        //SEND TO MY SERVER URL
        url: "http:myserverlocationurl.com",
        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.

answered Jun 18, 2017 at 18:52

gauravmuk

1,62614 silver badges20 bronze badges

Collectives™ on Stack Overflow

Log in authentication using Jquery and Json

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related