{"id":12995,"date":"2013-05-21T16:00:27","date_gmt":"2013-05-21T13:00:27","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=12995"},"modified":"2013-05-21T09:57:40","modified_gmt":"2013-05-21T06:57:40","slug":"spring-mvc-ajax-and-json-part-3-the-client-side-code","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html","title":{"rendered":"Spring MVC, Ajax and JSON Part 3 &#8211; The Client Side Code"},"content":{"rendered":"<p>If you\u2019ve been following this short series of blogs on Spring, Ajax and JSON you\u2019ll recall that I\u2019ve got as far as creating a Spring MVC web application that displays a form, which allows the user to select a bunch of items and submit a request to the server to purchase them. The server then replies with some JSON allowing the user to confirm their purchases. If you already know all this you can now jump to <b>HERE<\/b>. If you\u2019re wondering what I\u2019m talking about then take a look at the first two blogs in this series:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-1-setting-the-scene.html\" target=\"new\">Spring MVC, Ajax and JSON Part 1 &#8211; Setting The Scene<\/a><\/li>\n<li><a href=\"http:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-2-the-server-side-code.html\" target=\"new\">Spring MVC, Ajax and JSON Part 2 &#8211; The Server Side Code<\/a><\/li>\n<\/ul>\n<h2>HERE<\/h2>\n<p>Having completed the server side code then the next thing to do is to move on to the client side code, which involves writing some JavaScript. Now, between you and me I&#8217;m not an expert in JavaScript though I, like most server side developers, seem to muddle through. The good news for people like me is that Javascript has come on in leaps and bounds over the last few years with lots of tools and libraries to ease the pain of development and, amongst all of these, jQuery seems to be the defacto standard with it&#8217;s reliance on chaining and &#8220;write less and do more&#8221; philosophy.<\/p>\n<p>Having stated that I&#8217;m using jQuery the next step is to setup the JSP so that I can start writing the client side code. If you take a look at <code>shopping.jsp<\/code>&#8216;s HTML &lt;head&gt; element you\u2019ll see that it contains the following links:<\/p>\n<pre class=\" brush:xml\">&lt;link rel=\"stylesheet\" href=\"&lt;c:url value='\/resources\/blueprint\/screen.css'\/&gt;\" type=\"text\/css\" media=\"screen, projection\"\/&gt;\r\n&lt;link rel=\"stylesheet\" href=\"&lt;c:url value='\/resources\/blueprint\/print.css'\/&gt;\" type=\"text\/css\" media=\"print\" \/&gt;\r\n&lt;!--[if lt IE 8]&gt;\r\n&lt;link rel=\"stylesheet\" href=\"&lt;c:url value='\/resources\/blueprint\/ie.css' \/&gt;\" type=\"text\/css\" media=\"screen, projection\" \/&gt;\r\n&lt;![endif]--&gt;\u00a0\u00a0\r\n\r\n&lt;link rel=\"stylesheet\" href=\"&lt;c:url value='\/resources\/style.css'\/&gt;\" type=\"text\/css\" media=\"screen, projection\"\/&gt;<\/pre>\n<p>The first three links are the includes for <code><a href=\"http:\/\/www.blueprintcss.org\/\" target=\"new\">Blueprint<\/a><\/code>, which, as I said in my first blog, are to make my life easier when it comes to screen formatting. The final link, to <code>style.css<\/code>, is the interesting one. It contains two css values that I&#8217;ve shameless borrowed from Keith Donald&#8217;s original Spring MVC AJAX sample code. These css values are <code>#mask<\/code> and <code>#popup<\/code>, which are applied to the following hidden <code>div<\/code>&#8216;s that I&#8217;ve added to my JSP:<\/p>\n<pre class=\" brush:xml\">\u00a0\u00a0\u00a0\u00a0 &lt;div id=\"mask\" style=\"display: none;\"&gt;&lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0 &lt;div id=\"popup\" style=\"display: none;\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"container\" id=\"insertHere\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div class=\"span-1 append-23 last\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;p&gt;&lt;a href=\"#\" onclick=\"closePopup();\"&gt;Close&lt;\/a&gt;&lt;\/p&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;<\/pre>\n<p>The mask div is used to grey out the contents of the browser, whilst the popup div is used to display a popup box into which I&#8217;m going to write the\u00a0JSON results of my AJAX call to the server. Note the <code>insertHere<\/code> id, it&#8217;s important later on&#8230;<\/p>\n<p>The last two lines of the JSP&#8217;s HTML head tag include the JavaScript files for this page:<\/p>\n<pre class=\" brush:xml\">\u00a0\u00a0\u00a0\u00a0 &lt;script type=\"text\/javascript\" src=\"&lt;c:url value='\/resources\/jQuery-1.9.1.js' \/&gt; \"&gt;&lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0 &lt;script type=\"text\/javascript\" src=\"&lt;c:url value='\/resources\/shopping.js' \/&gt; \"&gt;&lt;\/script&gt;<\/pre>\n<p>The first of these imports is jQuery version 1.9.1. The version is important here. If you&#8217;re using version 1.7.x or below, then the javascript below won&#8217;t work as the jQuery Guys changed the way that the AJAX call works in version jQuery 1.8; however, the JavaScript code could be easily modified if necessary.<\/p>\n<p>The second JavaScript import is <code>shopping.js<\/code>, which includes all the code required for this application, the crux of which is:<\/p>\n<pre class=\" brush:java\">$(document).ready( \r\n\u00a0\u00a0\u00a0 function() { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0 $('form').submit( \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function() { \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('.tmp').remove();\u00a0\u00a0\u00a0 \/\/ Remove any divs added by the last request \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (request) { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 request.abort();\u00a0 \/\/ abort any pending request \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var $form = $(this); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ let's select and cache all the fields \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var $inputs = $form.find(\"input\"); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ serialize the data in the form \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var serializedData = $form.serialize(); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ let's disable the inputs for the duration of the ajax request \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $inputs.prop(\"disabled\", true); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ fire off the request to OrderController \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var request = $.ajax({ \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url : \"http:\/\/localhost:8080\/store\/confirm\", \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type : \"post\", \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data : serializedData \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ This is jQuery 1.8+ \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ callback handler that will be called on success \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 request.done(function(data) { \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(\"Resulting UUID: \" + data.uuid); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(\"&lt;div class='span-16 append-8 tmp'&gt;&lt;p&gt;You have confirmed the following purchases:&lt;\/p&gt;&lt;\/div&gt;\") \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo('#insertHere'); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var items = data.items; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Add the data from the request as &lt;div&gt;s to the pop up &lt;div&gt; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for ( var i = 0; i &lt; items.length; i++) { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var item = items[i]; \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var newDiv = \"&lt;div class='span-4\u00a0 tmp'&gt;&lt;p&gt;\" + item.name + \"&lt;\/p&gt;&lt;\/div&gt;\"; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(newDiv).appendTo('#insertHere'); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newDiv = \"&lt;div class='span-6 tmp'&gt;&lt;p&gt;\" + item.description + \"&lt;\/p&gt;&lt;\/div&gt;\"; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(newDiv).appendTo('#insertHere'); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newDiv = \"&lt;div class='span-4 append-10 last tmp'&gt;&lt;p&gt;\u00a3\" + item.price + \"&lt;\/p&gt;&lt;\/div&gt;\"; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(newDiv).appendTo('#insertHere'); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(\"Item: \" + item.name + \"\u00a0 Description: \" + item.description + \" Price: \" \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 + item.price); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ callback handler that will be called on failure \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 request.fail(function(jqXHR, textStatus, errorThrown) { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ log the error to the console \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert(\"The following error occured: \" + textStatus, errorThrown); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ callback handler that will be called regardless if the request failed or succeeded \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 request.always(function() { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $inputs.prop(\"disabled\", false);\u00a0 \/\/ re-enable the inputs \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 event.preventDefault();\u00a0\u00a0 \/\/ prevent default posting of form \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 showPopup(); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }); \r\n\u00a0\u00a0\u00a0 });<\/pre>\n<p>All the action takes place inside functions that have been submitted to jQuery&#8217;s <code>ready()<\/code> function and, as is usual with JavaScript, there are functions passed to functions passed to functions &#8211; the chaining I was talking about earlier. Remember that the <code>ready()<\/code> function will be called when the document is &#8216;ready&#8217; for interaction.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p>The first inner function is <code>$('form').submit(\u2026)<\/code>. If you don\u2019t know jQuery then <code>$<\/code> is the main entry point to the jQuery library and is simply shorthand for writing <code>jQuery<\/code>. In this call I&#8217;m selecting <i>all<\/i> forms in the document (and there&#8217;s only one) and passing a function argument to the <code>submit(\u2026)<\/code>method.<\/p>\n<blockquote>\n<p>The thing about jQuery is that you use it to select objects within your document model and then do something with them. jQuery has its own selection technique which uses strings passed to the jQuery(\u2026) method. The strings have the following basic format: HTML elements such as &#8216;form&#8217;, &#8216;a&#8217; &#8216;div&#8217; etc. are written in plain English and when individually passed to jQuery will select<br \/> <i>all<\/i> instances of that HTML type within the document.\u00a0 Words with a &#8216;.&#8217; appended are CSS values and words with a &#8216;#&#8217; appended are html id attributes. So, for example, if I wrote: <code>$('form#bill').submit(...)<\/code>\u00a0then I&#8217;d be selecting all forms with an id of <code>bill<\/code>, or if I wrote <code>$('.fred').submit(\u2026)<\/code> then I&#8217;d be selecting all document objects with a class attribute of <code>fred<\/code>. Once you&#8217;ve got your head around this query language, then the rest is plain sailing.<\/p>\n<p>When it comes to jQuery I find the <a href=\"http:\/\/www.amazon.co.uk\/jQuery-Cookbook-Cody-Lindley\/dp\/0596159773\" target=\"new\">O&#8217;Reilly jQuery Cookbook<\/a> really useful.<\/p>\n<\/blockquote>\n<p>The function that&#8217;s passed to the <code>$('form').submit(\u2026)<\/code> method is where all the work takes place. Before making an Ajax request there are a few house keeping tasks to complete. These include removing any document objects with a class of <code>tmp<\/code> (the first time this is called it&#8217;ll do nothing, but bare with me here); aborting any outstanding requests to the server (this will do nothing most of the time); disabling any form inputs and serialising the data that the Ajax request will post to the server. The key chunk of the JavaScript code is the<br \/> <a href=\"http:\/\/api.jquery.com\/jQuery.ajax\/\" target=\"new\">jQuery Ajax request<\/a>:<\/p>\n<pre class=\" brush:java\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ fire off the request to OrderController \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var request = $.ajax({ \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url : \"http:\/\/localhost:8080\/store\/confirm\", \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type : \"post\", \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data : serializedData \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });<\/pre>\n<p>The format of this function is usually: <i>ajax, url, settings<\/i>. The URL I&#8217;m using is <code>http:\/\/localhost:8080\/store\/confirm<\/code>\u00a0that corresponds to the Spring <code>RequestMapping<\/code> I described last week. The settings you can use are optional key value pairs\u00a0and fully described in the <a href=\"http:\/\/api.jquery.com\/jQuery.ajax\/\" target=\"new\">jQuery Ajax documentation<\/a>. In this instance I&#8217;m sending the serialised form data using a <i>post<\/i> request.<\/p>\n<p>Having made the request, there are couple of final house keeping tasks to take care of. These are to prevent the HTML form submitting anything to the server and to &#8216;popup&#8217; a div into which the results of the Ajax request are written. This uses the two divs previously mentioned with ids of <code>popup<\/code> and <code>mask<\/code>.<\/p>\n<pre class=\" brush:java\">function showPopup() { \r\n\u00a0 $('body').css('overflow', 'hidden'); \r\n\u00a0 $('#popup').fadeIn('fast'); \r\n\u00a0 $('#mask').fadeIn('fast'); \r\n}<\/pre>\n<p>Getting back to the Ajax request&#8230; The <code>$.ajax(...)<\/code> function call returns an object named <code>request<\/code>. This is of type <a href=\"http:\/\/api.jquery.com\/jQuery.ajax\/#jqXHR\" target=\"new\"><code>jqXHR<\/code><\/a>, where the confusing acronym of XHR stands for <i>XML HTTP Request<\/i>. The <code>jqXHR<\/code> object as a number of callback methods designed to allow your code to deal with certain events. In this case I&#8217;ve implemented: <code>fail(\u2026)<\/code>, <code>always(\u2026)<\/code> and <code>done(\u2026)<\/code>. In the case of a request failure, the browser will call <code>fail(\u2026)<\/code> to display a simple <code>alert(\u2026)<\/code>. <code>always(\u2026)<\/code> is an aptly named method that is <i>always<\/i> called irrespective of the request&#8217;s success or failure. In this case it re-enables all form\u2019s input types. Finally there&#8217;s the <code>done(\u2026)<\/code> method that&#8217;s called when the Ajax request is successful.<\/p>\n<pre class=\" brush:java\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 request.done(function(data) { \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(\"Resulting UUID: \" + data.uuid); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(\"&lt;div class='span-16 append-8 tmp'&gt;&lt;p&gt;You have confirmed the following purchases:&lt;\/p&gt;&lt;\/div&gt;\") \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .appendTo('#insertHere'); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var items = data.items; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Add the data from the request as &lt;div&gt;s to the pop up &lt;div&gt; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for ( var i = 0; i &lt; items.length; i++) { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var item = items[i]; \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var newDiv = \"&lt;div class='span-4\u00a0 tmp'&gt;&lt;p&gt;\" + item.name + \"&lt;\/p&gt;&lt;\/div&gt;\"; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(newDiv).appendTo('#insertHere'); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newDiv = \"&lt;div class='span-6 tmp'&gt;&lt;p&gt;\" + item.description + \"&lt;\/p&gt;&lt;\/div&gt;\"; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(newDiv).appendTo('#insertHere'); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newDiv = \"&lt;div class='span-4 append-10 last tmp'&gt;&lt;p&gt;\u00a3\" + item.price + \"&lt;\/p&gt;&lt;\/div&gt;\"; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(newDiv).appendTo('#insertHere'); \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(\"Item: \" + item.name + \"\u00a0 Description: \" + item.description + \" Price: \" \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 + item.price); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } \r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });<\/pre>\n<p>The <code>done(\u2026)<\/code> method is the most important here. As its argument it gets passed a function and the argument to this function is the JSON data we&#8217;re interested in. This isn&#8217;t any old raw JSON string, jQuery has converted the JSON to an object that&#8217;s got <code>uuid<\/code> and <code>items<\/code> attributes; a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Doppelg%C3%A4nger\" target=\"new\">doppelg\u00e4nger<\/a> of the server side <code>OrderForm<\/code> object from <a href=\"http:\/\/www.captaindebug.com\/2013\/05\/spring-mvc-ajax-and-json-part-2-server.html#.UY9UnZWhClI\" target=\"new\">my last blog<\/a>. Using this <code>data<\/code> object, all that&#8217;s left for me to do is to display the results on the screen. This means looping through the data and creating a <code>newDiv<\/code> variable for each of the <code>OrderForm<\/code>\u2019s attributes and converting them to HTML. This is simple string formatting so, for example:<\/p>\n<pre class=\" brush:xml\">\"&lt;div class='span-4  tmp'&gt;&lt;p&gt;\" + item.name + \"&lt;\/p&gt;&lt;\/div&gt; \"<\/pre>\n<p>becomes:<\/p>\n<pre class=\" brush:xml\">&lt;div class='span-4  tmp'&gt;&lt;p&gt;Socks&lt;\/p&gt;&lt;\/div&gt;<\/pre>\n<p>This <code>div<\/code> contains some useful of class attributes. These attributes are the <a href=\"http:\/\/www.blueprintcss.org\/\" target=\"new\">Blueprint<\/a> display attributes and one called <code>tmp<\/code>. The <code>tmp<\/code> class attribute ties into the previously mentioned <code>$('.tmp').remove();<\/code> call. This is used to delete a user&#8217;s previous selections from the popup div when the user makes multiple submissions.<\/p>\n<p>Having created the <code>newDiv<\/code> variable, the final step is to append it to the popup <code>div<\/code> using jQuery&#8217;s <code>appendTo(\u2026)<\/code> function with an argument of <code>'#insertHere'<\/code>:<\/p>\n<pre class=\" brush:java\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(newDiv).appendTo('#insertHere');<\/pre>\n<p>If you run the application, you\u2019ll now get the following shopping form from which you can select the items you wish to buy:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/05\/Screen-Shot-2013-05-12-at-11.07.28.png\"><img decoding=\"async\" class=\"aligncenter\" style=\"border: 0px none;\" alt=\"\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/05\/Screen-Shot-2013-05-12-at-11.07.28.png\" width=\"320\" height=\"175\" border=\"0\" \/><\/a><\/p>\n<p>Pressing <i>Confirm Purchase<\/i> will now request the JSON from the server, format it and display the following popup div:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/05\/Screen-Shot-2013-05-12-at-11.07.42.png\"><img decoding=\"async\" class=\"aligncenter\" style=\"border: 0px none;\" alt=\"\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/05\/Screen-Shot-2013-05-12-at-11.07.42.png\" width=\"320\" height=\"224\" border=\"0\" \/><\/a><\/p>\n<p>Unless I\u2019ve missed something out, then that\u2019s about it. These three blogs cover the creation of the app, adding the server side code and formatting it with some client side JavaScript.<\/p>\n<p>There are a couple of final points. Firstly, I\u2019m not a Javascript or client side expert, so if there any experts out there who spot any errors then I look forward to hearing from you&#8230; Secondly, I\u2019ve forgotten to mention that the JSON part of this project is RESTFul, so thanks to Josh Long and his mention on <a href=\"http:\/\/www.springsource.org\/node\/22605\" target=\"new\">This Week in Spring<\/a> for reminding me. I guess that it didn\u2019t occur to me to mention this because as a general rule then it should go without saying that every app should be as RESTFul as possible.<\/p>\n<p>For the full source code to this blog, see GitHub &#8211; <a href=\"https:\/\/github.com\/roghughe\/captaindebug\/tree\/master\/ajax-json\" target=\"new\">https:\/\/github.com\/roghughe\/captaindebug\/tree\/master\/ajax-json<\/a><\/p>\n<p>&nbsp;<\/p>\n<div style=\"border: 1px solid #D8D8D8; background: #FAFAFA; width: 100%; padding-left: 5px;\"><b><i>Reference: <\/i><\/b><a href=\"http:\/\/www.captaindebug.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-client.html\">Spring MVC, Ajax and JSON Part 3 &#8211; The Client Side Code<\/a> from our <a href=\"http:\/\/www.javacodegeeks.com\/jcg\">JCG partner<\/a> Roger Hughes at the <a href=\"http:\/\/www.captaindebug.com\/\">Captain Debug&#8217;s Blog <\/a> blog.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you\u2019ve been following this short series of blogs on Spring, Ajax and JSON you\u2019ll recall that I\u2019ve got as far as creating a Spring MVC web application that displays a form, which allows the user to select a bunch of items and submit a request to the server to purchase them. The server then &hellip;<\/p>\n","protected":false},"author":65,"featured_media":175,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[353,69,30,150],"class_list":["post-12995","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-enterprise-java","tag-ajax","tag-json","tag-spring","tag-spring-mvc"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Spring MVC, Ajax and JSON Part 3 - The Client Side Code<\/title>\n<meta name=\"description\" content=\"If you\u2019ve been following this short series of blogs on Spring, Ajax and JSON you\u2019ll recall that I\u2019ve got as far as creating a Spring MVC web application\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spring MVC, Ajax and JSON Part 3 - The Client Side Code\" \/>\n<meta property=\"og:description\" content=\"If you\u2019ve been following this short series of blogs on Spring, Ajax and JSON you\u2019ll recall that I\u2019ve got as far as creating a Spring MVC web application\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-21T13:00:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/json-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Roger Hughes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roger Hughes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html\"},\"author\":{\"name\":\"Roger Hughes\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/c9feacaf8e783104a69621cd65bf1f07\"},\"headline\":\"Spring MVC, Ajax and JSON Part 3 &#8211; The Client Side Code\",\"datePublished\":\"2013-05-21T13:00:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html\"},\"wordCount\":1477,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/json-logo.jpg\",\"keywords\":[\"Ajax\",\"JSON\",\"Spring\",\"Spring MVC\"],\"articleSection\":[\"Enterprise Java\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html\",\"name\":\"Spring MVC, Ajax and JSON Part 3 - The Client Side Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/json-logo.jpg\",\"datePublished\":\"2013-05-21T13:00:27+00:00\",\"description\":\"If you\u2019ve been following this short series of blogs on Spring, Ajax and JSON you\u2019ll recall that I\u2019ve got as far as creating a Spring MVC web application\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/json-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/json-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/05\\\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/java\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Enterprise Java\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/java\\\/enterprise-java\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Spring MVC, Ajax and JSON Part 3 &#8211; The Client Side Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/c9feacaf8e783104a69621cd65bf1f07\",\"name\":\"Roger Hughes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/db9d1e5362dbc3f8007b383b852473b59fb8c5282a6066a13ab1cef761a9d5d6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/db9d1e5362dbc3f8007b383b852473b59fb8c5282a6066a13ab1cef761a9d5d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/db9d1e5362dbc3f8007b383b852473b59fb8c5282a6066a13ab1cef761a9d5d6?s=96&d=mm&r=g\",\"caption\":\"Roger Hughes\"},\"sameAs\":[\"http:\\\/\\\/www.captaindebug.com\\\/\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/Roger-Hughes\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spring MVC, Ajax and JSON Part 3 - The Client Side Code","description":"If you\u2019ve been following this short series of blogs on Spring, Ajax and JSON you\u2019ll recall that I\u2019ve got as far as creating a Spring MVC web application","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html","og_locale":"en_US","og_type":"article","og_title":"Spring MVC, Ajax and JSON Part 3 - The Client Side Code","og_description":"If you\u2019ve been following this short series of blogs on Spring, Ajax and JSON you\u2019ll recall that I\u2019ve got as far as creating a Spring MVC web application","og_url":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2013-05-21T13:00:27+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/json-logo.jpg","type":"image\/jpeg"}],"author":"Roger Hughes","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Roger Hughes","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html"},"author":{"name":"Roger Hughes","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/c9feacaf8e783104a69621cd65bf1f07"},"headline":"Spring MVC, Ajax and JSON Part 3 &#8211; The Client Side Code","datePublished":"2013-05-21T13:00:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html"},"wordCount":1477,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/json-logo.jpg","keywords":["Ajax","JSON","Spring","Spring MVC"],"articleSection":["Enterprise Java"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html","url":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html","name":"Spring MVC, Ajax and JSON Part 3 - The Client Side Code","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/json-logo.jpg","datePublished":"2013-05-21T13:00:27+00:00","description":"If you\u2019ve been following this short series of blogs on Spring, Ajax and JSON you\u2019ll recall that I\u2019ve got as far as creating a Spring MVC web application","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/json-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/json-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2013\/05\/spring-mvc-ajax-and-json-part-3-the-client-side-code.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Java","item":"https:\/\/www.javacodegeeks.com\/category\/java"},{"@type":"ListItem","position":3,"name":"Enterprise Java","item":"https:\/\/www.javacodegeeks.com\/category\/java\/enterprise-java"},{"@type":"ListItem","position":4,"name":"Spring MVC, Ajax and JSON Part 3 &#8211; The Client Side Code"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/c9feacaf8e783104a69621cd65bf1f07","name":"Roger Hughes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/db9d1e5362dbc3f8007b383b852473b59fb8c5282a6066a13ab1cef761a9d5d6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/db9d1e5362dbc3f8007b383b852473b59fb8c5282a6066a13ab1cef761a9d5d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db9d1e5362dbc3f8007b383b852473b59fb8c5282a6066a13ab1cef761a9d5d6?s=96&d=mm&r=g","caption":"Roger Hughes"},"sameAs":["http:\/\/www.captaindebug.com\/"],"url":"https:\/\/www.javacodegeeks.com\/author\/Roger-Hughes"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/12995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=12995"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/12995\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/175"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=12995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=12995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=12995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}