{"id":17515,"date":"2013-09-23T14:00:43","date_gmt":"2013-09-23T11:00:43","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=17515"},"modified":"2013-09-23T13:57:13","modified_gmt":"2013-09-23T10:57:13","slug":"spring-mvc-ajax-jquery","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html","title":{"rendered":"Spring MVC: Ajax &#038; JQuery"},"content":{"rendered":"<p>Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I\u2019m going to use JQuery on a client side for sending of requests and receiving of responses. This tutorial will be based on one of my previous tutorials about Spring MVC and REST services. In this article you will read how to make a web-application more interactive with the help of asynchronous requests.<\/p>\n<h2>Preparations<\/h2>\n<p>I need to modify the SmartphoneController class by removing methods which are not required any more. This is a first step of AJAX integration.<br \/>\n&nbsp;<\/p>\n<pre class=\"brush:java\">\/\/imports are omitted\r\n@Controller\r\n@RequestMapping(value=\"\/smartphones\")\r\npublic class SmartphoneController {\r\n\r\n\t@Autowired\r\n\tprivate SmartphoneService smartphoneService;\r\n\r\n\t@RequestMapping(value=\"\/create\", method=RequestMethod.GET)\r\n\tpublic ModelAndView createSmartphonePage() {\r\n\t\tModelAndView mav = new ModelAndView(\"phones\/new-phone\");\r\n\t\tmav.addObject(\"sPhone\", new Smartphone());\r\n\t\treturn mav;\r\n\t}\r\n\r\n\t@RequestMapping(value=\"\/create\", method=RequestMethod.POST, \r\n\t\t\tproduces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)\r\n\t@ResponseBody\r\n\tpublic Smartphone createSmartphone(@RequestBody Smartphone smartphone) {\r\n\t\treturn smartphoneService.create(smartphone);\r\n\t}\r\n\r\n\t@RequestMapping(value=\"\/edit\/{id}\", method=RequestMethod.GET)\r\n\tpublic ModelAndView editSmartphonePage(@PathVariable int id) {\r\n\t\tModelAndView mav = new ModelAndView(\"phones\/edit-phone\");\r\n\t\tSmartphone smartphone = smartphoneService.get(id);\r\n\t\tmav.addObject(\"sPhone\", smartphone);\r\n\t\treturn mav;\r\n\t}\r\n\r\n\t@RequestMapping(value=\"\/edit\/{id}\", method=RequestMethod.PUT, \r\n\t\t\tproduces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)\r\n\t@ResponseBody\r\n\tpublic Smartphone editSmartphone(@PathVariable int id, \r\n\t\t\t@RequestBody Smartphone smartphone) {\r\n\t\tsmartphone.setId(id);\r\n\t\treturn smartphoneService.update(smartphone);\r\n\t}\r\n\r\n\t@RequestMapping(value=\"\/delete\/{id}\", method=RequestMethod.DELETE, \r\n\t\t\tproduces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)\r\n\t@ResponseBody\r\n\tpublic Smartphone deleteSmartphone(@PathVariable int id) {\r\n\t\treturn smartphoneService.delete(id);\r\n\t}\r\n\r\n\t@RequestMapping(value=\"\", method=RequestMethod.GET,\r\n\t\t\tproduces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)\r\n\t@ResponseBody\r\n\tpublic List&lt; Smartphone &gt; allPhones() {\r\n\t\treturn smartphoneService.getAll();\r\n\t}\r\n\r\n\t@RequestMapping(value=\"\", method=RequestMethod.GET)\r\n\tpublic ModelAndView allPhonesPage() {\r\n\t\tModelAndView mav = new ModelAndView(\"phones\/all-phones\");\r\n\t\tList&lt; Smartphone &gt; smartphones = new ArrayList&lt; Smartphone &gt;();\r\n\t\tsmartphones.addAll(allPhones());\r\n\t\tmav.addObject(\"smartphones\", smartphones);\r\n\t\treturn mav;\r\n\t}\r\n\r\n}<\/pre>\n<p>You can compare the new version of the <em>SmartphoneController<\/em> with the older one. Methods which process PUT, POST, DELETE requests and return <em>ModelAndView<\/em> objects were removed. The methods were deleted because AJAX calls can be addressed directly to REST methods. Now the controller contains just two types of methods:<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<ul>\n<li>The first type directs user to pages where CRUD operations can be performed.<\/li>\n<li>The second type performs CRUD operations (REST methods)<\/li>\n<\/ul>\n<h2>Client side<\/h2>\n<p>An AJAX usage implies a lot of code on a client side of a web-application. In this section I will demonstrate a basics which will help you to understand what steps to do for implementation of AJAX calls. Let\u2019s examine case with creation of a new smartphone in the application.<\/p>\n<p>First of all I need to add JQuery library to HTML page:<\/p>\n<pre class=\"brush:java\">&lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>A main part of the HTML has one valuable update \u2013 extension of form <em>action<\/em> attribute was changed to .json<\/p>\n<pre class=\"brush:java\">&lt;div id=\"container\"&gt;\r\n&lt;h1&gt;Create new Smartphone&lt;\/h1&gt;\r\n&lt;div&gt;\r\n&lt;p&gt;Here you can create new Smartphone:&lt;\/p&gt;\r\n&lt;div id=\"sPhoneFromResponse\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;form:form id=\"newSmartphoneForm\" action=\"${pageContext.request.contextPath}\/smartphones\/create.json\" commandname=\"sPhone\"&gt;\r\n&lt;table&gt;\r\n&lt;tbody&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Producer:&lt;\/td&gt;\r\n&lt;td&gt;\r\n&lt;form:select path=\"producer\"&gt;\r\n\t&lt;form:option value=\"NOKIA\"&gt;Nokia&lt;\/form:option&gt;\r\n\t&lt;form:option selected=\"selected\" value=\"IPHONE\"&gt;iPhone&lt;\/form:option&gt;\r\n\t&lt;form:option value=\"HTC\"&gt;HTC&lt;\/form:option&gt;\r\n\t&lt;form:option value=\"SAMSUNG\"&gt;Samsung&lt;\/form:option&gt;\r\n&lt;\/form:select&gt;\r\n&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Model:&lt;\/td&gt;\r\n&lt;td&gt;&lt;form:input path=\"model\"&gt;&lt;\/form:input&gt;&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Price:&lt;\/td&gt;\r\n&lt;td&gt;&lt;form:input path=\"price\"&gt;&lt;\/form:input&gt;&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;&lt;input value=\"Create\" type=\"submit\"&gt;&lt;\/td&gt;\r\n&lt;td&gt;&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/tbody&gt;\r\n&lt;\/table&gt;\r\n&lt;\/form:form&gt;\r\n&lt;a href=\"${pageContext.request.contextPath}\/index.html\"&gt;Home page&lt;\/a&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>And now, ladies and gentlemen, I wish to introduce a snippet of JQuery code for the creation of new smartphone:<\/p>\n<pre class=\"brush:java\">    $(document).ready(function() {\r\n\r\n      $('#newSmartphoneForm').submit(function(event) {\r\n\r\n    \t  var producer = $('#producer').val();\r\n    \t  var model = $('#model').val();\r\n    \t  var price = $('#price').val();\r\n    \t  var json = { \"producer\" : producer, \"model\" : model, \"price\": price};\r\n\r\n        $.ajax({\r\n        \turl: $(\"#newSmartphoneForm\").attr( \"action\"),\r\n        \tdata: JSON.stringify(json),\r\n        \ttype: \"POST\",\r\n\r\n        \tbeforeSend: function(xhr) {\r\n        \t\txhr.setRequestHeader(\"Accept\", \"application\/json\");\r\n        \t\txhr.setRequestHeader(\"Content-Type\", \"application\/json\");\r\n        \t},\r\n        \tsuccess: function(smartphone) {\r\n        \t\tvar respContent = \"\";\r\n\r\n\t\t  \t\trespContent += \"&lt;span class=\"success\"&gt;Smartphone was created: [\";\r\n\t\t  \t\trespContent += smartphone.producer + \" : \";\r\n\t\t  \t\trespContent += smartphone.model + \" : \" ;\r\n\t\t  \t\trespContent += smartphone.price + \"]&lt;\/span&gt;\";\r\n\r\n        \t\t$(\"#sPhoneFromResponse\").html(respContent);   \t\t\r\n        \t}\r\n        });\r\n\r\n        event.preventDefault();\r\n      });\r\n\r\n    });<\/pre>\n<p>I\u2019m not going to stop on this code and explain it in detail because you can read about AJAX and JQuery on <a title=\"JQuery AJAX\" href=\"http:\/\/learn.jquery.com\/ajax\/\" target=\"_blank\">official site<\/a>.<\/p>\n<p>Brief explanation: when someone want to submit the form with specified ID, all form fields are assigned to appropriate variables. After that a new JSON document is generated based on the form field variables. Then AJAX call is performed. It directed to URL which is specified in the action attribute of form tag. The JSON is used as a data which need to be processed. Type of the request is POST (it can vary depending on operation, e.g. for update it will has PUT value). In the beforeSend function I explicitly specify required headers for JSON format. In the end I formulate a response and insert it in DOM.<\/p>\n<p><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/09\/Create-new-Smartphone.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-17517\" alt=\"Create-new-Smartphone\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/09\/Create-new-Smartphone.png\" width=\"456\" height=\"295\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/09\/Create-new-Smartphone.png 456w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/09\/Create-new-Smartphone-300x194.png 300w\" sizes=\"(max-width: 456px) 100vw, 456px\" \/><\/a><\/p>\n<p>That\u2019s it what related to creation of smartphone. The update of smartphone is the similar, just type of the request need to be changed.<\/p>\n<p>Now let\u2019s see how to work with DELETE type of requests. As previously I need to change extension of URLs to .json<\/p>\n<pre class=\"brush:java\">&lt;a href=\"${pageContext.request.contextPath}\/smartphones\/delete\/${sPhone.id}.json\"&gt;Delete&lt;\/a&gt;<\/pre>\n<p>A JQuery code for the DELETE operation will be a little bit distinct compared to POST and PUT.<\/p>\n<pre class=\"brush:java\">$(document).ready(function() {\r\n\r\n\tvar deleteLink = $(\"a:contains('Delete')\");\r\n\r\n\t$(deleteLink).click(function(event) {\r\n\r\n\t\t$.ajax({\r\n\t\t\turl: $(event.target).attr(\"href\"),\r\n\t\t\ttype: \"DELETE\",\r\n\r\n\t\t\t  beforeSend: function(xhr) {\r\n\t\t\t  \txhr.setRequestHeader(\"Accept\", \"application\/json\");\r\n\t\t\t  \txhr.setRequestHeader(\"Content-Type\", \"application\/json\");\r\n\t\t\t  },\r\n\r\n\t\t\t  success: function(smartphone) {\r\n\t\t\t  \tvar respContent = \"\";\r\n\t\t\t  \tvar rowToDelete = $(event.target).closest(\"tr\");\r\n\r\n\t\t\t  \trowToDelete.remove();\r\n\r\n\t\t\t  \trespContent += \"&lt;span class=\"success\"&gt;Smartphone was deleted: [\";\r\n\t\t\t  \trespContent += smartphone.producer + \" : \";\r\n\t\t\t  \trespContent += smartphone.model + \" : \" ;\r\n\t\t\t  \trespContent += smartphone.price + \"]&lt;\/span&gt;\";\r\n\r\n\t\t\t  \t$(\"#sPhoneFromResponse\").html(respContent);   \t\t\r\n\t\t\t  }\r\n\t\t});\r\n\r\n\t\tevent.preventDefault();\r\n\t});\r\n\r\n});<\/pre>\n<p>The first distinction is the selector for the element. In case with DELETE I want to work with links but not with forms. The type of the AJAX call is changed to DELETE value. There is no any data which is send with the request. And in the end I delete the row with the smartphone which need to be deleted.<\/p>\n<p><a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/09\/Delete-smartphone.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-17519\" alt=\"Delete-smartphone\" src=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/09\/Delete-smartphone.png\" width=\"456\" height=\"323\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/09\/Delete-smartphone.png 456w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2013\/09\/Delete-smartphone-300x212.png 300w\" sizes=\"(max-width: 456px) 100vw, 456px\" \/><\/a><\/p>\n<h2>Summary<\/h2>\n<p>I hope this short overview of the AJAX will be useful for you. There are a lot of features which can be implemented with the help of AJAX in any web-application, so don\u2019t ignore this convenient way for communication with a server. You can find this application on <a href=\"https:\/\/github.com\/Fruzenshtein\/MobileApp\" target=\"_blank\">GitHub<\/a>.<br \/>\n&nbsp;<\/p>\n<div style=\"border: 1px solid #D8D8D8; background: #FAFAFA; width: 100%; padding-left: 5px;\"><b><i>Reference: <\/i><\/b><a href=\"http:\/\/fruzenshtein.com\/spring-mvc-ajax-jquery\/\">Spring MVC: Ajax &#038; JQuery<\/a> from our <a href=\"http:\/\/www.javacodegeeks.com\/jcg\">JCG partner<\/a> Alexey Zvolinskiy at the <a href=\"http:\/\/fruzenshtein.com\/\">Fruzenshtein&#8217;s notes<\/a> blog.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I\u2019m going to use JQuery on a client side for sending of requests and receiving of responses. This tutorial will be based on one of my previous tutorials about Spring MVC and REST services. In this article you will read how &hellip;<\/p>\n","protected":false},"author":374,"featured_media":240,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[353,209,30,150],"class_list":["post-17515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-enterprise-java","tag-ajax","tag-jquery","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 &amp; JQuery<\/title>\n<meta name=\"description\" content=\"Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I\u2019m going to use JQuery on a client side for sending of requests and\" \/>\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\/09\/spring-mvc-ajax-jquery.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 &amp; JQuery\" \/>\n<meta property=\"og:description\" content=\"Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I\u2019m going to use JQuery on a client side for sending of requests and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.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-09-23T11:00:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/spring-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=\"Alexey Zvolinskiy\" \/>\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=\"Alexey Zvolinskiy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html\"},\"author\":{\"name\":\"Alexey Zvolinskiy\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/ac87395bf8afb0ae3515feb6a0f36d02\"},\"headline\":\"Spring MVC: Ajax &#038; JQuery\",\"datePublished\":\"2013-09-23T11:00:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html\"},\"wordCount\":603,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/spring-logo.jpg\",\"keywords\":[\"Ajax\",\"jQuery\",\"Spring\",\"Spring MVC\"],\"articleSection\":[\"Enterprise Java\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html\",\"name\":\"Spring MVC: Ajax & JQuery\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/spring-logo.jpg\",\"datePublished\":\"2013-09-23T11:00:43+00:00\",\"description\":\"Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I\u2019m going to use JQuery on a client side for sending of requests and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/spring-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2012\\\/10\\\/spring-logo.jpg\",\"width\":150,\"height\":150,\"caption\":\"spring-interview-questions-answers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2013\\\/09\\\/spring-mvc-ajax-jquery.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 &#038; JQuery\"}]},{\"@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\\\/ac87395bf8afb0ae3515feb6a0f36d02\",\"name\":\"Alexey Zvolinskiy\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/082c897ff3a223afa16dedb5c6638b8b7caef162b241379e9c755b70aed186f5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/082c897ff3a223afa16dedb5c6638b8b7caef162b241379e9c755b70aed186f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/082c897ff3a223afa16dedb5c6638b8b7caef162b241379e9c755b70aed186f5?s=96&d=mm&r=g\",\"caption\":\"Alexey Zvolinskiy\"},\"description\":\"Alexey is a test developer with solid experience in automation of web-applications using Java, TestNG and Selenium. He is so much into QA that even after work he provides training courses for junior QA engineers.\",\"sameAs\":[\"http:\\\/\\\/fruzenshtein.com\\\/\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/alexey-zvolinskiy\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spring MVC: Ajax & JQuery","description":"Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I\u2019m going to use JQuery on a client side for sending of requests and","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\/09\/spring-mvc-ajax-jquery.html","og_locale":"en_US","og_type":"article","og_title":"Spring MVC: Ajax & JQuery","og_description":"Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I\u2019m going to use JQuery on a client side for sending of requests and","og_url":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2013-09-23T11:00:43+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/spring-logo.jpg","type":"image\/jpeg"}],"author":"Alexey Zvolinskiy","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Alexey Zvolinskiy","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html"},"author":{"name":"Alexey Zvolinskiy","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/ac87395bf8afb0ae3515feb6a0f36d02"},"headline":"Spring MVC: Ajax &#038; JQuery","datePublished":"2013-09-23T11:00:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html"},"wordCount":603,"commentCount":5,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/spring-logo.jpg","keywords":["Ajax","jQuery","Spring","Spring MVC"],"articleSection":["Enterprise Java"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html","url":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html","name":"Spring MVC: Ajax & JQuery","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/spring-logo.jpg","datePublished":"2013-09-23T11:00:43+00:00","description":"Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I\u2019m going to use JQuery on a client side for sending of requests and","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/spring-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2012\/10\/spring-logo.jpg","width":150,"height":150,"caption":"spring-interview-questions-answers"},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2013\/09\/spring-mvc-ajax-jquery.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 &#038; JQuery"}]},{"@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\/ac87395bf8afb0ae3515feb6a0f36d02","name":"Alexey Zvolinskiy","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/082c897ff3a223afa16dedb5c6638b8b7caef162b241379e9c755b70aed186f5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/082c897ff3a223afa16dedb5c6638b8b7caef162b241379e9c755b70aed186f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/082c897ff3a223afa16dedb5c6638b8b7caef162b241379e9c755b70aed186f5?s=96&d=mm&r=g","caption":"Alexey Zvolinskiy"},"description":"Alexey is a test developer with solid experience in automation of web-applications using Java, TestNG and Selenium. He is so much into QA that even after work he provides training courses for junior QA engineers.","sameAs":["http:\/\/fruzenshtein.com\/"],"url":"https:\/\/www.javacodegeeks.com\/author\/alexey-zvolinskiy"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/17515","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\/374"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=17515"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/17515\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/240"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=17515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=17515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=17515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}