Main Index Page
We use a simple index.jsp page, where we set a button that fetches a JSON, and a <div> where the result will be displayed:<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;" charset=UTF-8">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript"
src="<c:url value='/resources/js/FetchingJsonWithAjax.js'/>">
</script>
<title>Welcome To Fetching JSON With Ajax !!!</title>
</head>
<body>
<h1>Fetching JSON With Ajax !!!</h1>
<div id="theJson"></div>
<button type="button" onclick="fetch_json()">
Fetch JSON
</button>
</body>
</html>
Javascript
On the button, we attach the fetch_json() Javascript method, which is called when the button is clicked:var fetch_json = function() {
$.ajax({
type: 'GET',
url: "/spring-fetching-json-with-ajax/getJSON",
dataType: 'json',
async: true,
success: function(result) {
var tmp = "Fetch time is: " + result.milliTime + " !"
+ "and the JSON is:"
+ JSON.stringify(result);
$("#theJson").html(tmp);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Issue fetching the JSON: "
+ textStatus + " "
+ errorThrown + " !");
}
});
}
Controller
The controller is kept simple, and a MilliTime object is returned for the Ajax call:@Controller
public class MyController {
@RequestMapping(value = "/")
public String home(Model model) {
return "index";
}
@RequestMapping(value="/getJSON", method = RequestMethod.GET)
public @ResponseBody MilliTimeItem getJSON() {
return new MilliTimeItem(System.currentTimeMillis());
}
}
Running The Example
Once compiled, the example can be run with mvn tomcat:run. Then, browse:http://localhost:8585/spring-fetching-json-with-ajax/
After clicking on the Fetch JSON button, something similar to the following will be displayed:
More Spring related posts here.
No comments:
Post a Comment