Spring MVC与jQuery结合使用Ajax技术
- gradle配置
group 'org.zln.webDemo' version '1.0-SNAPSHOT' apply plugin: 'java' apply plugin: 'jetty' sourceCompatibility = 1.8 repositories { mavenCentral() } dependencies { ...... compile group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: '2.8.1' ..... }
注意：jackson-databind 是必须的，否则无法将返回转换成JSON格式
- web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> ...... <!--③ 配置Spring MVC地址映射--> <servlet> <servlet-name>webDemo</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/springServlet/applicationContext-*-servlet.xml</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>webDemo</servlet-name> <url-pattern>*.html</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>webDemo</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>webDemo</servlet-name> <url-pattern>*.action</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>webDemo</servlet-name> <url-pattern>*.json</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
注意：配置了json也作为请求的后缀，专门用于json来传递数据的Ajax请求
- 前台界面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %> <% String homePage = request.getContextPath(); %> <!DOCTYPE HTML> <html> <head> <title>Title</title> <script type="text/javascript" src="<%=homePage%>/jsLib/jquery-3.1.0.min.js"></script> <meta charset="UTF-8"/> <script type="text/javascript"> $(function(){ $("#bt1").click(function(){ $.getJSON( "<%=homePage%>/module/ajaxGetTime.json" ,{key:"参数123"} ,function(data){ var $timeDiv = $("#time"); $timeDiv.html(data.nowTime); } ) }) }) </script> </head> <body> ajax测试首页<br/> <input type="button" id="bt1" value="获取当前时间"/><br/> <div id="time"></div> </body> </html>
注意：请求后缀一定要是json啊（否则又要去配置其他东西了，麻烦）
这里使用了getJSON函数，其他函数如 $.post也行
- 控制层
@RequestMapping(value = "/ajaxGetTime.json") @ResponseBody public Map<String,String> ajaxGetTime(HttpServletRequest request){ logger.info("获取参数:"+request.getParameter("key")); Map<String,String> map = new HashMap<>(); String timeStr = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()); map.put("nowTime",timeStr); logger.info("准备传递给前台的数据:"+map); return map; }
- 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:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd"> <!--这个包下的,所有加过特殊注解的类,都被Spring管理--> <context:component-scan base-package="org" resource-pattern="**/*Controller.class"/> <mvc:annotation-driven/> <!--静态资源--> <!--<mvc:resources mapping="/css/**" location="/WEB-INF/css/"/>--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:viewClass="org.springframework.web.servlet.view.JstlView" p:prefix="/WEB-INF/jsp/" p:suffix=".jsp"/> </beans>
