南宁网站建设南宁,珠海网站建设小程序,机械设备 东莞网站建设,美橙网站建设经典案例今天#xff0c;我想演示如何将AJAX集成到Spring MVC应用程序中。 我将在客户端使用JQuery来发送请求和接收响应。 本教程将基于我以前关于Spring MVC和REST服务的教程之一。 在本文中#xff0c;您将了解如何在异步请求的帮助下使Web应用程序更具交互性。 准备工作 我需要通… 今天我想演示如何将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, methodRequestMethod.GET)public ModelAndView createSmartphonePage() {ModelAndView mav new ModelAndView(phones/new-phone);mav.addObject(sPhone, new Smartphone());return mav;}RequestMapping(value/create, methodRequestMethod.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}, methodRequestMethod.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}, methodRequestMethod.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}, methodRequestMethod.DELETE, produces MediaType.APPLICATION_JSON_VALUE, consumes MediaType.APPLICATION_JSON_VALUE)ResponseBodypublic Smartphone deleteSmartphone(PathVariable int id) {return smartphoneService.delete(id);}RequestMapping(value, methodRequestMethod.GET,produces MediaType.APPLICATION_JSON_VALUE, consumes MediaType.APPLICATION_JSON_VALUE)ResponseBodypublic List Smartphone allPhones() {return smartphoneService.getAll();}RequestMapping(value, methodRequestMethod.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与旧版本进行比较。 删除了处理PUTPOSTDELETE请求并返回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 idcontainer
h1Create new Smartphone/h1
div
pHere you can create new Smartphone:/p
div idsPhoneFromResponse/div
/div
form:form idnewSmartphoneForm action${pageContext.request.contextPath}/smartphones/create.json commandnamesPhone
table
tbody
tr
tdProducer:/td
td
form:select pathproducerform:option valueNOKIANokia/form:optionform:option selectedselected valueIPHONEiPhone/form:optionform:option valueHTCHTC/form:optionform:option valueSAMSUNGSamsung/form:option
/form:select
/td
/tr
tr
tdModel:/td
tdform:input pathmodel/form:input/td
/tr
tr
tdPrice:/td
tdform:input pathprice/form:input/td
/tr
tr
tdinput valueCreate typesubmit/td
td/td
/tr
/tbody
/table
/form:form
a href${pageContext.request.contextPath}/index.htmlHome 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 classsuccessSmartphone 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}.jsonDelete/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 classsuccessSmartphone 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的AjaxJQuery 。 翻译自: https://www.javacodegeeks.com/2013/09/spring-mvc-ajax-jquery.html
