使用帶有注釋和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，將顯示以下頁面：