您的位置：首页 > Web前端 > JQuery

Spring MVC与jQuery结合使用Ajax技术

2016-07-30 22:10 471 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航