档案网站建设愿景,网站建设服务合同印花税,校园网络规划设计,合肥网站建设托管与Ajax一起工作对我来说一直很有趣#xff01; 是不是 #xff1f; 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用。 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax。 和往常一样#xff0c;我们将在Spring MVC 3框架中以Ajax的实际示例为例#xff0c;并将其… 与Ajax一起工作对我来说一直很有趣 是不是 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用。 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax。 和往常一样我们将在Spring MVC 3框架中以Ajax的实际示例为例并将其实现并且通过使您理解本主题我将使实现变得容易。 让我们看看示例的要求是什么Spring MVC 3 Ajax工具将如何满足它 在我们的示例中我们将列出姓名和学历最高的学生并将其发送到安置办公室以便学生获得机会。 我们将在线向学生提供“添加学生表格”以便他们可以在线提交姓名并注册。 由于很多学生都会使用该系统因此系统的性能可能会非常低。 为了提高Web应用程序的性能我们将结合使用Ajax和Spring MVC 3 Framework和JQuery。 我们必须执行以下步骤来实现我们的示例 首先我们将创建一个包含学生信息值的域类User.java。 之后我们将创建控制器类UserListController.java以处理HTTP请求。 我们的控制器将处理三种类型的请求。 首先显示“添加学生表格”其次处理来自“添加学生表格”的Ajax请求并将学生添加到列表中第三次显示学生信息作为列表。 然后我们将创建一个jsp页面AddUser.jsp以显示“添加学生表单”该页面将使用JQuery将Ajax请求发送到Spring MVC Controller。 jsp还将向用户确认已将Student添加到列表中。 然后我们将创建一个jspShowUsers.jsp该列表将列出列表中的所有用户。 User.java User.java具有两个属性名称和教育信息用于存储学生信息。 以下是User.java的代码 package com.raistudies.domain;public class User {private String name null;private String education null;// Getter and Setter are omitted for making the code short
} UserListController.java 控制器具有三种方法来处理三个请求url。 “ showForm”方法处理向用户显示表单的请求。 波纹管代码显示了UserListController.java package com.raistudies.controllers;import java.util.ArrayList;
import java.util.List;import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;import com.raistudies.domain.User;Controller
public class UserListController {private ListUser userList new ArrayListUser();RequestMapping(value/AddUser.htm,methodRequestMethod.GET)public String showForm(){return AddUser;}RequestMapping(value/AddUser.htm,methodRequestMethod.POST)public ResponseBody String addUser(ModelAttribute(valueuser) User user, BindingResult result ){String returnText;if(!result.hasErrors()){userList.add(user);returnText User has been added to the list. Total number of users are userList.size();}else{returnText Sorry, an error has occur. User has not been added to list.;}return returnText;}RequestMapping(value/ShowUsers.htm)public String showUsers(ModelMap model){model.addAttribute(Users, userList);return ShowUsers;}
} “ addUsers”与处理表单的控制器方法相同因为它还包含注解ResponseBody 它告诉Spring MVC该方法返回的String是对请求的响应它不必查找此字符串的视图。 因此调整字符串将作为响应发送回浏览器因此Ajax请求将起作用。 “ showUsers”方法用于向用户显示学生列表。 AddUser.jsp AddUser.jsp包含一个简单的表单用于收集有关学生的信息并使用JQerey JavaScript框架生成对服务器的Ajax请求。 以下是AddUser.jsp中的代码 % page languagejava contentTypetext/html; charsetISO-8859-1
pageEncodingISO-8859-1%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
htmlheadmeta http-equivContent-Type contenttext/html; charsetISO-8859-1titleAdd Users using ajax/titlescript src/AjaxWithSpringMVC2Annotations/js/jquery.js/scriptscript typetext/javascriptfunction doAjaxPost() {// get the form valuesvar name $(#name).val();var education $(#education).val();$.ajax({type: POST,url: /AjaxWithSpringMVC2Annotations/AddUser.htm,data: name name education education,success: function(response){// we have the response$(#info).html(response);$(#name).val();$(#education).val();},error: function(e){alert(Error: e);}});}/script/headbodyh1Add Users using Ajax ......../h1tabletrtdEnter your name : /tdtd input typetext idnamebr//td/trtrtdEducation : /tdtd input typetext ideducationbr//td/trtrtd colspan2input typebutton valueAdd Users onclickdoAjaxPost()br//td/trtrtd colspan2div idinfo stylecolor: green;/div/td/tr/tablea href/AjaxWithSpringMVC2Annotations/ShowUsers.htmShow All Users/a/body
/html 如果您不了解JQuery可能会有些困惑。 这是JQuery代码的说明 var name $name。val; –这里的$是JQuery选择器用于选择HTML中其标识符作为参数传递的任何节点。 如果标识符是带有的前缀则意味着它是HTML节点的ID。 在这里 $name。val包含其“名称”HTML节点的值。 用户将在其中输入其姓名的文本框为name。 因此Java脚本变量名称将包含用户的名称。 $ .ajax -是JQuery的$变量中的调用Ajax的方法。 这里有五个论点。 首先“ type ”表示请求的Ajax类型。 它可以是POST或GET。 然后“ url ”表示将要提交的Ajax提交的URL。 “ data ”将包含要发送到服务器的原始数据。 如果请求获得成功并且服务器向浏览器发送响应则“ 成功 ”将包含必须调用的功能代码。 如果请求出现任何错误“ error ”将包含必须调用的功能代码。 $info。htmlresponse; -将服务器的响应设置为div。 这样“ Hello” 名称将显示在ID为“ info ”的div中。 ShowUsers.jsp 以下是ShowUsers.jsp中的代码用于将所有学生信息从ArrayList打印到jsp页面 % page languagejava contentTypetext/html; charsetISO-8859-1
pageEncodingISO-8859-1%
% taglib urihttp://java.sun.com/jsp/jstl/core prefixc%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
htmlheadmeta http-equivContent-Type contenttext/html; charsetISO-8859-1titleUsers Added using Ajax/title/headbody stylecolor: green;The following are the users added in the list :brulc:forEach items${Users} varuserliName : c:out value${user.name} /; Education : c:out value${user.education}//c:forEach/ul/body
/html 在这里我们使用了JSTL核心taglib来遍历ArrayList并在浏览器中显示每个值。 cforEach items “ $ {Users}” var “ user” 标签用于遍历ArrayList。 属性“ items”用于定义存储List对象的bean因此items ” $ {Users}”表示在“ Users” bean中存在用户列表。 “ var”属性表示将存储每个用户的变量的名称。 cout value ” $ {user.name}” / 这样单个用户将存储在变量名“ user”中因此要使用$ {user.name}在User对象中打印name属性。 app-config.xml 我们的Spring MVC配置文件应该能够处理注释驱动的控制器。 配置如下 ?xml version1.0 encodingUTF-8?
beans xmlnshttp://www.springframework.org/schema/beans
xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance
xmlns:contexthttp://www.springframework.org/schema/context
xmlns:mvchttp://www.springframework.org/schema/mvc
xsi:schemaLocation
http://www.springframework.org/schema/beans?? ?? ?? http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd!-- Scans the classpath of this application for Components to deploy as beans --context:component-scan base-packagecom.raistudies /!-- Configures the Controller programming model --mvc:annotation-driven /!-- Resolves view names to protected .jsp resources within the /WEB-INF/views directory --bean idviewResolver classorg.springframework.web.servlet.view.InternalResourceViewResolverproperty nameprefix value/WEB-INF/jsp//property namesuffix value.jsp//bean/beans 将war文件部署到tomcat 6并在浏览器中单击URL将显示以下页面 使用Spring MVC 3的Ajax表单 填写学生信息 使用Spring MVC 3的Ajax填写表格 单击“添加用户”按钮后您将收到一条消息提示用户已被添加到列表中 Ajax表单提交确认Spring MVC 3 要显示添加到列表中的所有学生请单击“显示所有用户”按钮您将获得以下页面 显示所有用户Spring MVC 3 这一切都来自使用Spring MVC 3和JQuery的Ajax。 您可以从以下链接下载源代码。 资料来源 下载 参考 使用来自JCG合作伙伴的 Annotations和JQuery的带有Spring MVC 3的Ajax Rai Studies博客上的Rahul Mondal。 翻译自: https://www.javacodegeeks.com/2012/02/ajax-with-spring-mvc-3-using.html
