ajax form is not submitted, just refreshed and nothing - ajax

Question

i have a form to register new users. here is the form:
<label for="add-username" class="col-md-4 control-label">Username:</label>
<div class="col-md-8">
<input id="add-username" name="username" type="text" class="form-control" placeholder="username"/>
</div>
</div>
<div class="form-group">
<label for="add-password" class="col-md-4 control-label">Password:</label>
<div class="col-md-8">
<input id="add-password" name="password" type="password" class="form-control" placeholder="password"/>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-4 col-md-8">
<c:if test="${duplicate}">
<p class="alert alert-danger">I'm sorry that username is already taken.</p>
</c:if>
<div id="validationRegisterUserErrors" class="alert alert-danger" style="display:none"></div>
<button type="submit" id="user-register-button" class="btn btn-primary">Register</button>
</div>
</div>
at the end of this jsp file, i have added a script which posts the form in ajax. the script is:
$("#user-register-button").click(function(event){
event.preventDefault();
registerUser();
});
function registerUser(){
var errorDiv = $("#validationRegisterUserErrors");
$.ajax({
url: 'user',
type: 'POST',
headers:{
'Content-type': 'application/json'
},
'dataType' : 'json',
data: JSON.stringify({
firstName: $('#add-first-name').val(),
lastName: $('#add-last-name').val(),
email: $('#add-email').val(),
username: $('#add-username').val(),
password: $('#add-password').val()
})
}).success(function(data){
errorDiv.empty();
errorDiv.hide();
window.location="login";
}).error(function (data, status){
errorDiv.empty();
errorDiv.show();
$.each(data.responseJSON.fieldErrors, function (index, validationError){
errorDiv.append(validationError.message);
errorDiv.append("<br>");
});
});
}
the url "user" is in usercontroller:
#ResponseBody
#ResponseStatus(HttpStatus.CREATED)
#RequestMapping(value="/user", method=RequestMethod.POST)
public User registerUser(#Valid #RequestBody User user, Model model){
user.setPassword(encoder.encode(user.getPassword()));
user.setRole("ROLE_USER");
try {
userDao.createUser(user);
} catch (DuplicateKeyException e){
boolean duplicate = true;
model.addAttribute("duplicate", duplicate);
}
return user;
}
but when i click register the page refreshes and in the url is written http://localhost:8080/signup?firstName=abc&lastName=adcd&email=adc%40ll.com&username=abcdef&password=9376868355
however no user is added. even if i don't fill out the form and click on register button, no validation error appears and it just refreshes the page. what can be the problem?

Answer 1

thanks for your great participation!!!
the problem was in headers:{...}.i changed my ajax to below and the problem solved:
function registerUser(){
var errorDiv = $("#validationRegisterUserErrors");
$.ajax({
url: 'user',
type: 'POST',
data: JSON.stringify({
firstName: $('#add-first-name').val(),
lastName: $('#add-last-name').val(),
email: $('#add-email').val(),
username: $('#add-username').val(),
password: $('#add-password').val(),
homeAddress:$('#add-home-add').val(),
workAddress:$('#add-work-add').val(),
phoneNumber:$('#add-phone').val(),
jobPosition:$('#add-job').val(),
fieldOfStudy:$('#add-field').val()
}),
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
'dataType' : 'json'
}).success(function(data, status){
alert("User has been added.");
$('#add-first-name').val('');
$('#add-last-name').val('');
$('#add-email').val('');
$('#add-username').val('');
$('#add-password').val('');
$('#add-home-add').val('');
$('#add-work-add').val('');
$('#add-job').val('');
$('#add-field').val('');
$('#add-phone').val('');
errorDiv.hide();
window.location="login";
}).error(function (data, status){
errorDiv.empty();
errorDiv.show();
$.each(data.responseJSON.fieldErrors, function (index, validationError){
errorDiv.append(validationError.message);
errorDiv.append("<br>");
});
});
}