Spring3MVC和jQuery的集成
在本教程.我们将使用Spring MVC建立一个简单的基于jQuery的计算器AJAX应用.
为了便于对比.
我们将创建两个页面.
一个传统的页面.
一个是基于AJAX的页面.
什么是jQuery?
一张是AJAX版本.
两者没有什么不同.但是非AJAX版本的将会在另外一个页面显示结果.
我们会看到明显的页面刷新过程
而AJAX版本将在同一个页面上显示结果.
我们几乎感觉不到页面刷新.
在此之前我们添加Spring MVC所必须的配置.
web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_ID" version="2.4"xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"><servlet><servlet-name>spring</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>spring</servlet-name><url-pattern>/</url-pattern></servlet-mapping><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener></web-app>
<?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:p="http://www.springframework.org/schema/p"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd"><!-- 定义一个视图解析器 --><bean id="viewResolver"p:suffix=".jsp" /></beans>
<?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.xsdhttp://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"><!-- 激活spring的注解. --><context:annotation-config /><!-- 扫描注解组件并且自动的注入spring beans中. 例如,他会扫描@Controller 和@Service下的文件.所以确保此base-package设置正确. --><context:component-scan base-package="org.liukai.tutorial" /><!-- 配置注解驱动的Spring MVC Controller 的编程模型.注:次标签只在 Servlet MVC工作! --><mvc:annotation-driven /></beans>
package org.liukai.tutorial.service;import org.apache.log4j.Logger;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;@Service("arithmeticService")@Transactionalpublic class ArithmeticService {protected static Logger logger = Logger.getLogger("service");/** * 实现一个加法运算 */public Integer add(Integer operand1,Integer operand2){logger.debug("Adding two numbers");return operand1 + operand2;}}package org.liukai.tutorial.controller;import javax.annotation.Resource;import org.apache.log4j.Logger;import org.liukai.tutorial.service.ArithmeticService;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;/** * 用于处理非AJAX运算. */@Controller@RequestMapping("/main/nonajax")public class NonAjaxController {protected static Logger logger = Logger.getLogger("controller");@Resource(name = "arithmeticService")private ArithmeticService arithmeticService;/** * 根据请求映射跳转到nonajax-add-page.jsp */@RequestMapping(value = "/add", method = RequestMethod.GET)public String getNonAjaxAddPage() {logger.debug("Received request to show non-AJAX, ordinary add page");// 他将会解析 /WEB-INF/jsp/nonajax-add-page.jspreturn "nonajax-add-page";}/** * 提交表单并进行运算. * @RequestParam表示从JSP页面接收值. * 是springMVC重要的传递参数手段之一. */@RequestMapping(value = "/add", method = RequestMethod.POST)public String add(@RequestParam(value = "inputNumber1", required = true) Integer inputNumber1,@RequestParam(value = "inputNumber2", required = true) Integer inputNumber2,Model model) {logger.debug("Received request to add two numbers");// 实现运算Integer sum = arithmeticService.add(inputNumber1, inputNumber2);// 添加到model返回到页面model.addAttribute("sum", sum);// 他将会解析 /WEB-INF/jsp/nonajax-add-result-page.jsp//并把model传递到该JSP页面.return "nonajax-add-result-page";}}<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!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=UTF-8"><title>Spring MVC - jQuery 整合教程</title></head><body><h3>Spring MVC - jQuery 整合教程</h3><h4>Non-AJAX version</h4><c:url var="addUrl" value="/main/nonajax/add" /><form method="POST" action="${addUrl}">Demo 1 <div style="border: 1px solid #ccc; width: 250px;">Add Two Numbers: <br/><input id="inputNumber1" name="inputNumber1" type="text" size="5"> +<input id="inputNumber2" name="inputNumber2" type="text" size="5"><input type="submit" value="Add" /> <br/>Sum: (Result will be shown on another page)</div></form></body></html><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!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=UTF-8"><title>Spring MVC - jQuery 整合教程</title></head><body><h3>Spring MVC - jQuery 整合教程</h3><h4>Non-AJAX version</h4>Demo 1 Result<div style="border: 1px solid #ccc; width: 250px;">Sum: ${sum}</div></body></html>
package org.liukai.tutorial.controller;import javax.annotation.Resource;import org.apache.log4j.Logger;import org.liukai.tutorial.service.ArithmeticService;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;@Controller@RequestMapping("/main/ajax")public class AjaxController {protected static Logger logger = Logger.getLogger("controller");@Resource(name = "arithmeticService")private ArithmeticService arithmeticService;/** * 根据映射跳转到指定的页面 */@RequestMapping(value = "/add", method = RequestMethod.GET)public String getAjaxAddPage() {logger.debug("Received request to show AJAX, add page");// 解析 /WEB-INF/jsp/ajax-add-page.jspreturn "ajax-add-page";}/** * 提交表单并进行运算. */@RequestMapping(value = "/add", method = RequestMethod.POST)public @ResponseBodyInteger add(@RequestParam(value = "inputNumber1", required = true) Integer inputNumber1,@RequestParam(value = "inputNumber2", required = true) Integer inputNumber2,Model model) {logger.debug("Received request to add two numbers");// 实现运算Integer sum = arithmeticService.add(inputNumber1, inputNumber2);// @ResponseBody 会自动的将返回值转换成JSON格式// 但是你必须添加jackson的jar包!!!return sum;}}<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!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=UTF-8"><script type="text/javascript" src="/spring-jquery/resources/js/jquery/jquery-1.4.4.min.js"></script><title>Spring MVC - jQuery 整合教程</title></head><body><h3>Spring MVC - jQuery 整合教程</h3><h4>AJAX version</h4>Demo 1<div style="border: 1px solid #ccc; width: 250px;">Add Two Numbers: <br/><input id="inputNumber1" type="text" size="5"> +<input id="inputNumber2" type="text" size="5"><input type="submit" value="Add" onclick="add()" /> <br/>Sum: <span id="sum">(Result will be shown here)</span></div><script type="text/javascript"> function add() {$(function() {$.post("/spring-jquery/main/ajax/add",{ inputNumber1: $("#inputNumber1").val(), inputNumber2: $("#inputNumber2").val() },function(data){// data contains the result// Assign result to the sum id$("#sum").replaceWith('<span id="sum">'+ data + '</span>');});});}</script></body></html>
<servlet-mapping><servlet-name>spring</servlet-name><url-pattern>/</url-pattern></servlet-mapping>
<mvc:resources location="/resources/" mapping="/resources/**"/>
<mvc:resources location="/resources/" mapping="/resources/**"/>
<?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.xsdhttp://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"><!-- 激活spring的注解. --><context:annotation-config /><!-- 扫描注解组件并且自动的注入spring beans中. 例如,他会扫描@Controller 和@Service下的文件.所以确保此base-package设置正确. --><context:component-scan base-package="org.liukai.tutorial" /><!-- 配置注解驱动的Spring MVC Controller 的编程模型.注:次标签只在 Servlet MVC工作! --><mvc:annotation-driven /><!-- resources下的静态资源不被DispatcherServlet接收处理 --><mvc:resources location="/resources/" mapping="/resources/**"/></beans>
