今天，我想演示如何將AJAX集成到Spring MVC應用程序中。 我將在客戶端使用JQuery來發送請求和接收響應。 本教程將基于我以前關于Spring MVC和REST服務的教程之一。 在本文中，您將了解如何在異步請求的幫助下使Web應用程序更具交互性。

準備工作

我需要通過刪除不再需要的方法來修改SmartphoneController類。 這是AJAX集成的第一步。

//imports are omitted @Controller @RequestMapping(value="/smartphones") public class SmartphoneController {@Autowiredprivate SmartphoneService smartphoneService;@RequestMapping(value="/create", method=RequestMethod.GET)public ModelAndView createSmartphonePage() {ModelAndView mav = new ModelAndView("phones/new-phone");mav.addObject("sPhone", new Smartphone());return mav;}@RequestMapping(value="/create", method=RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)@ResponseBodypublic Smartphone createSmartphone(@RequestBody Smartphone smartphone) {return smartphoneService.create(smartphone);}@RequestMapping(value="/edit/{id}", method=RequestMethod.GET)public ModelAndView editSmartphonePage(@PathVariable int id) {ModelAndView mav = new ModelAndView("phones/edit-phone");Smartphone smartphone = smartphoneService.get(id);mav.addObject("sPhone", smartphone);return mav;}@RequestMapping(value="/edit/{id}", method=RequestMethod.PUT, produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)@ResponseBodypublic Smartphone editSmartphone(@PathVariable int id, @RequestBody Smartphone smartphone) {smartphone.setId(id);return smartphoneService.update(smartphone);}@RequestMapping(value="/delete/{id}", method=RequestMethod.DELETE, produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)@ResponseBodypublic Smartphone deleteSmartphone(@PathVariable int id) {return smartphoneService.delete(id);}@RequestMapping(value="", method=RequestMethod.GET,produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)@ResponseBodypublic List< Smartphone > allPhones() {return smartphoneService.getAll();}@RequestMapping(value="", method=RequestMethod.GET)public ModelAndView allPhonesPage() {ModelAndView mav = new ModelAndView("phones/all-phones");List< Smartphone > smartphones = new ArrayList< Smartphone >();smartphones.addAll(allPhones());mav.addObject("smartphones", smartphones);return mav;}}

您可以將新版本的SmartphoneController與舊版本進行比較。 刪除了處理PUT，POST，DELETE請求并返回ModelAndView對象的方法。 由于AJAX調用可以直接尋址到REST方法，因此刪除了這些方法。 現在，控制器僅包含兩種類型的方法：

• 第一種將用戶定向到可以執行CRUD操作的頁面。
• 第二種類型執行CRUD操作（REST方法）

客戶端

使用AJAX意味著在Web應用程序的客戶端上有很多代碼。 在本節中，我將演示一個基礎知識，這些基礎知識將幫助您了解實現AJAX調用需要執行的步驟。 讓我們檢查一下在應用程序中創建新智能手機的情況。

首先，我需要將JQuery庫添加到HTML頁面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

HTML的主要部分進行了一次重要的更新-將表單操作屬性的擴展名更改為.json

<div id="container"> <h1>Create new Smartphone</h1> <div> <p>Here you can create new Smartphone:</p> <div id="sPhoneFromResponse"></div> </div> <form:form id="newSmartphoneForm" action="${pageContext.request.contextPath}/smartphones/create.json" commandname="sPhone"> <table> <tbody> <tr> <td>Producer:</td> <td> <form:select path="producer"><form:option value="NOKIA">Nokia</form:option><form:option selected="selected" value="IPHONE">iPhone</form:option><form:option value="HTC">HTC</form:option><form:option value="SAMSUNG">Samsung</form:option> </form:select> </td> </tr> <tr> <td>Model:</td> <td><form:input path="model"></form:input></td> </tr> <tr> <td>Price:</td> <td><form:input path="price"></form:input></td> </tr> <tr> <td><input value="Create" type="submit"></td> <td></td> </tr> </tbody> </table> </form:form> <a href="${pageContext.request.contextPath}/index.html">Home page</a> </div>

現在，女士們，先生們，我希望介紹一段用于創建新智能手機的JQuery代碼：

$(document).ready(function() {$('#newSmartphoneForm').submit(function(event) {var producer = $('#producer').val();var model = $('#model').val();var price = $('#price').val();var json = { "producer" : producer, "model" : model, "price": price};$.ajax({url: $("#newSmartphoneForm").attr( "action"),data: JSON.stringify(json),type: "POST",beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "application/json");xhr.setRequestHeader("Content-Type", "application/json");},success: function(smartphone) {var respContent = "";respContent += "<span class="success">Smartphone was created: [";respContent += smartphone.producer + " : ";respContent += smartphone.model + " : " ;respContent += smartphone.price + "]</span>";$("#sPhoneFromResponse").html(respContent); }});event.preventDefault();});});

我不會停止這段代碼并詳細解釋它，因為您可以在官方網站上閱讀有關AJAX和JQuery的信息。

簡要說明：當某人想要提交具有指定ID的表單時，所有表單字段都分配給適當的變量。 之后，根據表單字段變量生成一個新的JSON文檔。 然后執行AJAX調用。 它指向在表單標簽的action屬性中指定的URL。 JSON用作需要處理的數據。 請求的類型為POST（它可以根據操作而有所不同，例如，對于更新，它將具有PUT值）。 在beforeSend函數中，我明確指定了JSON格式所需的標頭。 最后，我制定一個響應并將其插入DOM。

就是與智能手機的創作有關的東西。 智能手機的更新與此類似，只是請求的類型需要更改。

現在，讓我們看看如何處理DELETE類型的請求。 和以前一樣，我需要將URL擴展名更改為.json

<a href="${pageContext.request.contextPath}/smartphones/delete/${sPhone.id}.json">Delete</a>

與POST和PUT相比，用于DELETE操作的JQuery代碼將有所不同。

$(document).ready(function() {var deleteLink = $("a:contains('Delete')");$(deleteLink).click(function(event) {$.ajax({url: $(event.target).attr("href"),type: "DELETE",beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "application/json");xhr.setRequestHeader("Content-Type", "application/json");},success: function(smartphone) {var respContent = "";var rowToDelete = $(event.target).closest("tr");rowToDelete.remove();respContent += "<span class="success">Smartphone was deleted: [";respContent += smartphone.producer + " : ";respContent += smartphone.model + " : " ;respContent += smartphone.price + "]</span>";$("#sPhoneFromResponse").html(respContent); }});event.preventDefault();});});

第一個區別是元素的選擇器。 如果使用DELETE，我想使用鏈接，但不使用表單。 AJAX調用的類型更改為DELETE值。 沒有與請求一起發送的任何數據。 最后，我刪除了需要刪除的智能手機行。

摘要

我希望這份簡短的AJAX概述對您有所幫助。 AJAX可以在任何Web應用程序中實現很多功能，因此請不要忽略這種與服務器通信的便捷方法。 您可以在GitHub上找到此應用程序。

參考： Spring MVC： Fruzenshtein的便箋博客中來自JCG合作伙伴 Alexey Zvolinskiy的Ajax＆JQuery 。

翻譯自: https://www.javacodegeeks.com/2013/09/spring-mvc-ajax-jquery.html

總結

以上是生活随笔為你收集整理的Spring MVC：Ajax和JQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。