使用带有注释和JQuery的Spring MVC 3的Ajax

与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添加到列表中。
然后，我们将创建一个jsp（ShowUsers.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 List<User> userList = new ArrayList<User>();@RequestMapping(value="/AddUser.htm",method=RequestMethod.GET)public String showForm(){return "AddUser";}@RequestMapping(value="/AddUser.htm",method=RequestMethod.POST)public @ResponseBody String addUser(@ModelAttribute(value="user") 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 language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Add Users using ajax</title><script src="/AjaxWithSpringMVC2Annotations/js/jquery.js"></script><script type="text/javascript">function 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></head><body><h1>Add Users using Ajax ........</h1><table><tr><td>Enter your name : </td><td> <input type="text" id="name"><br/></td></tr><tr><td>Education : </td><td> <input type="text" id="education"><br/></td></tr><tr><td colspan="2"><input type="button" value="Add Users" onclick="doAjaxPost()"><br/></td></tr><tr><td colspan="2"><div id="info" style="color: green;"></div></td></tr></table><a href="/AjaxWithSpringMVC2Annotations/ShowUsers.htm">Show 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'）。html（response）; ：-将服务器的响应设置为div。这样，“ Hello” +名称将显示在ID为“ info ”的div中。

ShowUsers.jsp
以下是ShowUsers.jsp中的代码，用于将所有学生信息从ArrayList打印到jsp页面：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Users Added using Ajax</title></head><body style="color: green;">The following are the users added in the list :<br><ul><c:forEach items="${Users}" var="user"><li>Name : <c:out value="${user.name}" />; Education : <c:out value="${user.education}"/></c:forEach></ul></body>
</html>

在这里，我们使用了JSTL核心taglib来遍历ArrayList并在浏览器中显示每个值。

<c：forEach items =“ $ {Users}” var =“ user”> ：标签用于遍历ArrayList。属性“ items”用于定义存储List对象的bean，因此items =” $ {Users}”表示在“ Users” bean中存在用户列表。 “ var”属性表示将存储每个用户的变量的名称。
<c：out value =” $ {user.name}” /> ：这样，单个用户将存储在变量名“ user”中，因此要使用$ {user.name}在User对象中打印name属性。

app-config.xml

我们的Spring MVC配置文件应该能够处理注释驱动的控制器。配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://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-package="com.raistudies" /><!-- Configures the @Controller programming model --><mvc:annotation-driven /><!-- Resolves view names to protected .jsp resources within the /WEB-INF/views directory --><bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/jsp/"/><property name="suffix" value=".jsp"/></bean></beans>

将war文件部署到tomcat 6并在浏览器中单击URL，将显示以下页面：