AJAX POST to RESTful service - ajax

Question

I have a login form and I am looking to post the input values to a RESTful web service and then the credentials are correct I show elements and hide the form but if they are incorrect an error message appears.
I want to do this via AJAX but I am hitting a stumbling block as all i am returning is an alert box with undefined inside. Any help would be greatly appreciated.
<div class="cp_LoginPanel fade-in form">
<div class="in">
<h1>Login</h1>
<form name="login-form" id="login-form" method="post">
<label id="error">Sorry it seems your credentials are incorrect</label>
<div class="inputBlock">
<label for="username">Username</label>
<input type="text" id="username" />
</div>
<div class="inputBlock">
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<input type="submit" value="Login" id="submit" />
</form>
</div>
</div>
$(document).ready(function () {
var username = $("#username").val();
var password = $("#password").val();
$("#submit").click(function () {
$.ajax({
type: 'POST',
url: "Service Here",
dataType: JSON,
data: {
"username": username,
"password": password
},
success: function (data) {
alert("success");
},
error: function (e) {
alert(e.Message)
}
});
});
});

Answer 1

Not that this is the answer to your problem. But im guessing you get and error and therefore try using the correct error parameters to get more information about your error.
The error function is called if the request fails. This functions receives 3 parameters.
The jqXHR object
A string describing the type of error that occurred
An optional exception object, if one occurred
Try using the code below to print out your error the correct way. Look at the example below:
error: function(jqXHR, textStatus, errorThrown) {
console.log('What is my error ' + textStatus);
console.log('Is an exception thrown ?? ' + errorThrown)
}
Hope that you get more information about your error :)
PS.
You could also look at the answer in this question. It the excact same problem as yours :)
jQuery Ajax - how to get response data in error