Incorrect Username and Password in accessing Restful web service with jQuery

Question

i have this code.

var txt = "username=admin&password=admin";

    var jsonText = JSON.stringify({username:'test', password:'test'});
    $.ajax( {
        url : 'http://localhost/testService/loadpayments/',
        type: "GET",
        contentType: "application/json; charset=utf-8",
        data:jsonText,
        dataType: "json",
        processdata:false,
        error : function(result) {
            $('#items').html(result);
        },
        success : function(model) {
            $("#items").html(model);
        }
       });

Now, when i run it in firefox and looking at it on the console it says incorrect username and password yet i correctly supplied both. also when i try to paste the url with the username and password( both correctly supplied ) it runs and returns gracefully. Am i doing it right? I'm relatively new to this kind of stuff. THANK YOU.

Answer 1

Best I can tell from your code snippet, your RESTful service expects that you provide the username and password as querystring parameters. If that is the case, then your request URL should look like this:

http://localhost/testService/loadpayments/?username=test&password=test

However, the request URL that your code is generating is:

http://localhost/testService/loadpayments/?{%22username%22:%22test%22,%22password%22:%22test%22}

There is no need to stringify your parameters. Instead, pass the object literal to the data parameter of the AJAX call, and set processData to true (or don't specify at all, since it defaults to true) so that the object will be transformed into querystring parameters:

var credentials = {username: 'test', password: 'test'};
$.ajax({
    url : 'http://localhost/testService/loadpayments/',
    type: "GET",
    contentType: "application/json; charset=utf-8",
    data: credentials,
    dataType: "json",
    processData: true, // defaults to true
    error : function(result) {
        $('#items').html(result);
    },
    success : function(model) {
        $("#items").html(model);
    }
   });

Answer 2

You are using

var jsonText = JSON.stringify({username:'test', password:'test'});

Instead, you need to create an object if using stringify. Create an object in JavaScript called user like the following:

var user = new Object();
user.username = "test";
user.password = "test";

var jsonText = JSON.stringify(user);

Perhaps this example will explain better

var contact = new Object(); 
contact.firstname = "Jesper";
contact.surname = "Aaberg";
contact.phone = ["555-0100", "555-0120"];

var jsonText = JSON.stringify(contact);

/* The value of jsonText is:
'{"firstname":"JESPER","surname":"AABERG","phone":["555-0100","555-0120"]}'
*/

This is untested but should work.

EDIT

I stand corrected on the object idea and agree with RoccoC5 in that the params in the query string are the way to go.