I'm trying to make a simple ajax call to a spring REST service I have setup.
My controller is defined as follows:
@Controller
public class SongPlayerController {
....
@RequestMapping(value = { "/ajax", "/ajax/" }, method = RequestMethod.GET)
@ResponseBody
public String ajax() {
return "New Song URL";
}
}
And then I have a simple html page with an ajax request:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function loadAjax() {
$.ajax({
type : "GET",
url : "http://localhost:8080/song-player/ajax",
data : "text",
success : function(response) {
$('#ajax').val(response);
},
error : function(e) {
alert('Error: ' + e);
}
});
}
function getAjax() {
$.getJSON('http://localhost:8080/song-player/ajax', function(data) {
alert('Ajax data' + data);
});
}
</script>
</head>
<body>
<button type="button" onclick="loadAjax()">Ajax Call</button>
<div id="ajax">This will be an ajax call.</div>
</body>
</html>
But, neither using the $.ajax or $.getJSON are returning anything. When using the ajax call, I'm getting the error "Error: [object Object]".
However, I know that my controller is setup properly because I can hit my service and get a response by using the RESTClient Firefox add-on so I assume the problem is with how I'm handling the jQuery calls but this is my first attempt at using jQuery so I don't know what is wrong with it.
The string literal "New Song URL" is not valid JSON. Try returning this:
@Controller
public class SongPlayerController {
@RequestMapping(value = { "/ajax", "/ajax/" }, method = RequestMethod.GET)
@ResponseBody
public String ajax() {
return "{\"url\":\"New Song URL\"}";
}
}
Then access this value as follows:
function getAjax() {
$.getJSON('http://localhost:8080/song-player/ajax', function(data) {
alert('Ajax data' + data.url);
});
}
You could use JSON-js's stringify() function as follows:
$.getJSON('http://localhost:8080/song-player/ajax', function(data) {
alert('Ajax data' + JSON.stringify(data));
});
$('#ajax').val(response);
wont work. this is a div. use
$('#ajax').text(response);
thats why loadAjax doesnt work. getAjax doesnt work because as others pointed out, your response is not valid json, so getJSON will not work.
In addition to what others have pointed out about malfomred json, it seems that my problem stemmed from trying to hit my service needed to be called with JSONP.
I ended up modifying the controller to follow this blog post for wrapping my responses with a callback parameter.
I also changed up my ajax call to expecte JSONP:
function loadAjax() {
$.ajax({
type : "GET",
url : "http://localhost:8080/song-player/ajax.json",
async : false,
dataType: "jsonp",
success : function(response) {
$('#ajax').text(response.streamUrl);
alert('Success: ' + response);
},
error : function(e) {
alert('Error: ' + e);
}
}).done(function(data) {
console.log(data);
console.log(data.streamUrl);
});
}
Thanks for all of the help.