Json response looks empty when called from controller otherwise working fine - json

Question

When I directly type the url for json response in browser I get the correct response printed in browser in JSON but with same URL is called by clicking on a button then response looks to be empty.
Here is my controller:
#RequestMapping(value="/ShowAllCustomers", method = RequestMethod.GET)
public #ResponseBody Customer AllCustomersList() {
Customer customer=customerService.findById(1);
return customer;
}
And here I am trying to get response:
<script type="text/javascript">
function startAjax() {
$.ajax({
type : 'GET',
url : 'customers/ShowAllCustomers',//this is url mapping for controller
dataType: 'json',
success : function(response) {
alert(response);
alert(response.first_name);
//this response is list of object commming from server
}
});
}
</script>
Here is button code which is pressed:
<input type="button" value="Customers" onclick="startAjax();"/>
But when I click on button I see no alert message on screen.
Any solution please?

Answer 1

First verify that the URL called by jQuery is the same as the one that you call by hand in the browser.
You can do so, in Chrome, by pressing F12, click on the Network tab, and after clicking the button, verify that the URL was called and was the correct one, and clicking on it verify if there is any response.
On the Java side, you can add logging when your method is called, but to start I think it's better that you verify what's happening on the JavaScript side.
Also check the Console tab, you might have a JavaScript error, that prevents further code execution.
Good luck.