user3196499
user3196499

Reputation: 1

Log in authentication using Jquery and Json

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.

Upvotes: 0

Views: 14137

Answers (3)

gauravmuk
gauravmuk

Reputation: 1616

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.

Upvotes: 0

Gjohn
Gjohn

Reputation: 1281

$.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);
    }
})

Upvotes: 1

rafiki_rafi
rafiki_rafi

Reputation: 1237

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

Upvotes: 0

Related Questions