skywhsq1987
- 浏览: 246297 次
-
文章分类
最新评论
SpringMVC:整合JQUERY与JSON
引用别处
博客分类： Spring
jsonjQueryAjaxITeyeWeb
参考资料
1 Spring3 MVC 笔记（二） —json+rest优化
http://7454103.iteye.com/?show_full=true
2 jquery 遍历对象、数组、集合
http://blog.sina.com.cn/s/blog_5db0dfe40100hay7.html
3 jquery 遍历 map(callback)
http://kaxu.iteye.com/blog/308367
4 Jquery的map遍历
http://blog.csdn.net/niu870781892/archive/2010/04/13/5479850.aspx
5 Spring mvc3的ajax
http://xace.iteye.com/blog/731263
6 Spring MVC 学习笔记 九 json格式的输入和输出
http://starscream.iteye.com/blog/1067606
在SpringMVC中使用JSON必须注意二点
1 必须包含:jackson的jar包,我使用的是: jackson-all-1.8.1.jar,
可在官网:http://mvnrepository.com/artifact/org.codehaus.jackson中去下载
2 在springmvc.xml配置文件中必配置: <mvc:annotation-driven/>
3 jquery.json-*.*.min.js
实现功能: 从后台获取对象,List,Map在前台显示,前台提交JSON数据格式到后台并且返回
一 工程相关图片
1 工程图片
2 效果图片
二 具体代码
1 springmvc.xml
Xml代码
<?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"
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">
<!--
自动搜索@Controller标注的类
用于指明系统从哪个路径下寻找controller，然后提前初始化这些对象。
-->
<context:component-scan base-package="com.liuzd.sj.web" />
<mvc:annotation-driven/>
<!-- ③：对模型视图名称的解析，即在模型视图名称添加前后缀 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" />
<!--
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<bean
class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
</list>
</property>
</bean>
<bean id="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
-->
</beans>
2 springmvc与jquery整合页面
Html代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ 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=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/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>
<p>Demo 1 计算并返回值</p>
<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="9">
<input type="submit" id="demo1" value="Add" /> <br/>
Sum: <br>
<span id="sum">(Result will be shown here)</span>
</div>
<hr><br>
<p>Demo 2 获取一个对象</p>
<div style="border: 1px solid #ccc; width: 250px;">
<select id="userId">
<c:forEach var="index" begin="1" end="5" step="1">
<option value="${index}">${index}</option>
</c:forEach>
</select>
<input type="submit" id="demo2" value="Get" /> <br/>
<span id="info">(Result will be shown here)</span>
</div>
<hr><br>
<p>Demo 3 返回List集合对象</p>
<div style="border: 1px solid #ccc; width: 250px;">
<input type="submit" id="demo3" value="Get List User" /> <br/>
<span id="listInfo">(Result will be shown here)</span>
</div>
<hr><br>
<p>Demo 4 返回Map集合对象</p>
<div style="border: 1px solid #ccc; width: 250px;">
<input type="submit" id="demo4" value="Get Map User" /> <br/>
<span id="mapInfo">(Result will be shown here)</span>
</div>
<hr><br>
<a href="${pageContext.request.contextPath}/index.jsp">返回</a>
<hr><br>
<script type="text/javascript">
$(function() {
$("#demo1").click(function(){
$.post("${pageContext.request.contextPath}/main/ajax/add.do",
{inputNumber1: $("#inputNumber1").val(),
inputNumber2: $("#inputNumber2").val()
},
function(data){
$("#sum").replaceWith('<span id="sum">'+ data + '</span>');
});
});
$("#demo2").click(function(){
var userId = $("#userId").val();
$.post("${pageContext.request.contextPath}/main/ajax/getUser/"+userId+".do",
null,
function(data){
var info = "姓名: " + data.name+",年龄: " + data.age + ",地址: " + data.address + ",性别: " + (data.sex == 1 ? "男" : "女")+",密码: " + data.password;
$("#info").html(info);
});
});
$("#demo3").click(function(){
$.post("${pageContext.request.contextPath}/main/ajax/userList.do",
null,
function(data){
/*
var info = '';
var leng = data.length;
for(var i=0;i<leng;i++){
info += data[i].id + "," + data[i].name + "," + data[i].sex + "," + data[i].password + "," + data[i].address + "," + data[i].age+"<br>";
}
$("#listInfo").html(info); */
var info = '';
$.each(data,function(index,entity) {
info += "姓名: " + entity.name+",年龄: " + entity.age + ",地址: " + entity.address + ",性别: " + (entity.sex == 1 ? "男" : "女")+",密码: " + entity.password+"<br>";
});
$("#listInfo").html(info);
});
});
$("#demo4").click(function(){
$.post("${pageContext.request.contextPath}/main/ajax/userMap.do",
null,
function(map){
var info = '';
$.each(map,function(key,values) {
info += "key="+key+"<br>";
$(values).each(function(){
info += "姓名: " + this.name+",年龄: " + this.age + ",地址: " + this.address + ",性别: " + (this.sex == 1 ? "男" : "女")+",密码: " + this.password+"<br>";
});
});
$("#mapInfo").html(info);
});
});
});
</script>
</body>
</html>
3 springmvc与jquery整合后台代码
Java代码
package com.liuzd.sj.web;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
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;
import com.liuzd.sj.entity.User;
@Controller
@RequestMapping("/main/ajax")
public class AjaxController {
/**
* 根据映射跳转到指定的页面
*/
@RequestMapping(value = "/add", method = RequestMethod.GET)
public String getAjaxAddPage() {
// 解析 /WEB-INF/jsp/ajax-add-page.jsp
return "ajax-add-page";
}
/**
* 提交表单并进行运算.
*/
@RequestMapping(value = "/add", method = RequestMethod.POST)
public @ResponseBody Integer add(
@RequestParam(value = "inputNumber1", required = true)Integer inputNumber1,
@RequestParam(value = "inputNumber2", required = true)Integer inputNumber2) {
// 实现运算
Integer sum = inputNumber1 + inputNumber2;
System.out.println("sum: " + sum);
// @ResponseBody 会自动的将返回值转换成JSON格式
// 但是你必须添加jackson的jar包!!!
return sum;
}
@RequestMapping(value = "/getUser/{userId}", method = RequestMethod.POST)
public @ResponseBody User getUser(@PathVariable("userId")String userId) {
System.out.println("根据ID获取用户对象: " + userId);
Map<String,User> users = new HashMap<String,User>();
users.put("1", new User("123456", "李逵", "123", "成都市", "1", 23));
users.put("2", new User("565676", "张三", "123", "北京市", "2", 53));
users.put("3", new User("325566", "李四", "123", "河南省", "2", 93));
users.put("4", new User("989654", "刘邦", "123", "蒙古包", "1", 13));
users.put("5", new User("234444", "王熙凤", "123", "成都市", "1", 43));
return users.get(userId);
}
@RequestMapping(value = "/userList", method = RequestMethod.POST)
public @ResponseBody
List<User> getUsers() {
List<User> users = new ArrayList<User>();
users.add(new User("123456", "李逵", "123", "成都市", "1", 23));
users.add(new User("123457", "李四", "124", "北京市", "2", 53));
users.add(new User("123458", "李三", "125", "河南市", "0", 73));
users.add(new User("123459", "李五", "126", "大路市", "3", 93));
return users;
}
@RequestMapping(value = "/userMap", method = RequestMethod.POST)
public @ResponseBody Map<String,User> getUserMap() {
Map<String,User> users = new HashMap<String,User>();
users.put("1", new User("123456", "李逵", "123", "成都市", "1", 23));
users.put("2",new User("123457", "李四", "124", "北京市", "2", 53));
users.put("3",new User("123458", "李三", "125", "河南市", "0", 73));
users.put("4",new User("123459", "李五", "126", "大路市", "3", 93));
return users;
}
}
4 sprinmcv与jquery,json整合页面
Html代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ 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=UTF-8">
<title>Spring MVC</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.json-2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.ajax( {
type : 'GET',
contentType : 'application/json',
url : '${pageContext.request.contextPath}/user/list.do',
dataType : 'json',
success : function(data) {
if (data && data.success == "true") {
$('#info').html("共" + data.total + "条数据。<br/>");
$.each(data.data, function(i, item) {
$('#info').append("编号：" + item.id + "，姓名：" + item.name + "，年龄：" + item.age+"<br>");
});
}
},
error : function() {
alert("error")
}
});
$("#submit").click(function() {
var jsonuserinfo = $.toJSON($('#form').serializeObject());
alert(jsonuserinfo);
jQuery.ajax( {
type : 'POST',
contentType : 'application/json',
url : '${pageContext.request.contextPath}/user/add.do',
data : jsonuserinfo,
dataType : 'json',
success : function(data) {
if (data && data.success == "true") {
$('#info').html("共" + data.total + "条数据。<br/>");
$.each(data.data, function(i, item) {
$('#info').append("编号：" + item.id + "，姓名：" + item.name + "，年龄：" + item.age+"<br>");
});
alert("新增成功！");
}
},
error : function(data) {
alert("error")
}
});
});
});
//将一个表单的数据返回成JSON对象
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
</script>
</head>
<body>
<div id="info"></div>
<form action="add" method="post" id="form">
编号：<input type="text" name="id"/>
姓名：<input type="text" name="name"/>
年龄：<input type="text" name="age"/>
性别: <select name="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
密码: <input name="password">
地址:<input name="address"/>
<input type="button" value="提交" id="submit"/>
</form>
</body>
</html>
5 sprinmcv与jquery,json后台代码
Java代码
package com.liuzd.sj.web;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.http.HttpEntity;
import org.springframework.stereotype.Controller;
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 org.springframework.web.bind.annotation.SessionAttributes;
import com.liuzd.sj.entity.User;
@Controller
@RequestMapping("/user")
@SessionAttributes("users")
public class DemoController {
@RequestMapping(value = "/list", method = RequestMethod.GET)
@ModelAttribute("users")
@ResponseBody
public Map<String, Object> getUserMaps() {
List<User> list = new ArrayList<User>();
User um = new User();
um.setId("1");
um.setName("sss");
um.setAge(66);
list.add(um);
um = new User();
um.setId("2");
um.setName("aaa");
um.setAge(44);
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>();
modelMap.put("total", list.size());
modelMap.put("data", list);
modelMap.put("success", "true");
return modelMap;
}
@RequestMapping(value = "/add", method = RequestMethod.POST)
@ResponseBody
//二种方式: A HttpEntity<User> B使用注解 @ResponseBody
public Map<String, Object> addUser(HttpEntity<User> model,javax.servlet.http.HttpServletRequest request) {
System.out.println("user: " + model.getBody());
Map<String, Object> map = (Map)request.getSession().getAttribute("users");
if(null == map){
map = getUserMaps();
}
List<User> list = (List<User>)map.get("data");
list.add(model.getBody());
map.put("total", list.size());
map.put("data", list);
request.getSession().setAttribute("users",map);
return map;
}
@RequestMapping("/ajaxPage")
public String ajaxAddPage() {
return "ajax-add-page2";
}
}
6 web.xml
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app 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">
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/classes/log4j.properties</param-value>
</context-param>
<context-param>
<param-name>log4jRefreshInterval</param-name>
<param-value>60000</param-value>
</context-param>
<context-param>
<param-name>log4jExposeWebAppRoot</param-name>
<param-value>false</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.util.Log4jConfigListener
</listener-class>
</listener>
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>
org.springframework.web.filter.CharacterEncodingFilter
</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>false</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
引用别处
博客分类： Spring
jsonjQueryAjaxITeyeWeb
参考资料
1 Spring3 MVC 笔记（二） —json+rest优化
http://7454103.iteye.com/?show_full=true
2 jquery 遍历对象、数组、集合
http://blog.sina.com.cn/s/blog_5db0dfe40100hay7.html
3 jquery 遍历 map(callback)
http://kaxu.iteye.com/blog/308367
4 Jquery的map遍历
http://blog.csdn.net/niu870781892/archive/2010/04/13/5479850.aspx
5 Spring mvc3的ajax
http://xace.iteye.com/blog/731263
6 Spring MVC 学习笔记 九 json格式的输入和输出
http://starscream.iteye.com/blog/1067606
在SpringMVC中使用JSON必须注意二点
1 必须包含:jackson的jar包,我使用的是: jackson-all-1.8.1.jar,
可在官网:http://mvnrepository.com/artifact/org.codehaus.jackson中去下载
2 在springmvc.xml配置文件中必配置: <mvc:annotation-driven/>
3 jquery.json-*.*.min.js
实现功能: 从后台获取对象,List,Map在前台显示,前台提交JSON数据格式到后台并且返回
一 工程相关图片
1 工程图片
2 效果图片
二 具体代码
1 springmvc.xml
Xml代码
<?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"
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">
<!--
自动搜索@Controller标注的类
用于指明系统从哪个路径下寻找controller，然后提前初始化这些对象。
-->
<context:component-scan base-package="com.liuzd.sj.web" />
<mvc:annotation-driven/>
<!-- ③：对模型视图名称的解析，即在模型视图名称添加前后缀 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver"
p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" />
<!--
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<bean
class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
</list>
</property>
</bean>
<bean id="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
-->
</beans>
2 springmvc与jquery整合页面
Html代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ 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=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/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>
<p>Demo 1 计算并返回值</p>
<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="9">
<input type="submit" id="demo1" value="Add" /> <br/>
Sum: <br>
<span id="sum">(Result will be shown here)</span>
</div>
<hr><br>
<p>Demo 2 获取一个对象</p>
<div style="border: 1px solid #ccc; width: 250px;">
<select id="userId">
<c:forEach var="index" begin="1" end="5" step="1">
<option value="${index}">${index}</option>
</c:forEach>
</select>
<input type="submit" id="demo2" value="Get" /> <br/>
<span id="info">(Result will be shown here)</span>
</div>
<hr><br>
<p>Demo 3 返回List集合对象</p>
<div style="border: 1px solid #ccc; width: 250px;">
<input type="submit" id="demo3" value="Get List User" /> <br/>
<span id="listInfo">(Result will be shown here)</span>
</div>
<hr><br>
<p>Demo 4 返回Map集合对象</p>
<div style="border: 1px solid #ccc; width: 250px;">
<input type="submit" id="demo4" value="Get Map User" /> <br/>
<span id="mapInfo">(Result will be shown here)</span>
</div>
<hr><br>
<a href="${pageContext.request.contextPath}/index.jsp">返回</a>
<hr><br>
<script type="text/javascript">
$(function() {
$("#demo1").click(function(){
$.post("${pageContext.request.contextPath}/main/ajax/add.do",
{inputNumber1: $("#inputNumber1").val(),
inputNumber2: $("#inputNumber2").val()
},
function(data){
$("#sum").replaceWith('<span id="sum">'+ data + '</span>');
});
});
$("#demo2").click(function(){
var userId = $("#userId").val();
$.post("${pageContext.request.contextPath}/main/ajax/getUser/"+userId+".do",
null,
function(data){
var info = "姓名: " + data.name+",年龄: " + data.age + ",地址: " + data.address + ",性别: " + (data.sex == 1 ? "男" : "女")+",密码: " + data.password;
$("#info").html(info);
});
});
$("#demo3").click(function(){
$.post("${pageContext.request.contextPath}/main/ajax/userList.do",
null,
function(data){
/*
var info = '';
var leng = data.length;
for(var i=0;i<leng;i++){
info += data[i].id + "," + data[i].name + "," + data[i].sex + "," + data[i].password + "," + data[i].address + "," + data[i].age+"<br>";
}
$("#listInfo").html(info); */
var info = '';
$.each(data,function(index,entity) {
info += "姓名: " + entity.name+",年龄: " + entity.age + ",地址: " + entity.address + ",性别: " + (entity.sex == 1 ? "男" : "女")+",密码: " + entity.password+"<br>";
});
$("#listInfo").html(info);
});
});
$("#demo4").click(function(){
$.post("${pageContext.request.contextPath}/main/ajax/userMap.do",
null,
function(map){
var info = '';
$.each(map,function(key,values) {
info += "key="+key+"<br>";
$(values).each(function(){
info += "姓名: " + this.name+",年龄: " + this.age + ",地址: " + this.address + ",性别: " + (this.sex == 1 ? "男" : "女")+",密码: " + this.password+"<br>";
});
});
$("#mapInfo").html(info);
});
});
});
</script>
</body>
</html>
3 springmvc与jquery整合后台代码
Java代码
package com.liuzd.sj.web;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
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;
import com.liuzd.sj.entity.User;
@Controller
@RequestMapping("/main/ajax")
public class AjaxController {
/**
* 根据映射跳转到指定的页面
*/
@RequestMapping(value = "/add", method = RequestMethod.GET)
public String getAjaxAddPage() {
// 解析 /WEB-INF/jsp/ajax-add-page.jsp
return "ajax-add-page";
}
/**
* 提交表单并进行运算.
*/
@RequestMapping(value = "/add", method = RequestMethod.POST)
public @ResponseBody Integer add(
@RequestParam(value = "inputNumber1", required = true)Integer inputNumber1,
@RequestParam(value = "inputNumber2", required = true)Integer inputNumber2) {
// 实现运算
Integer sum = inputNumber1 + inputNumber2;
System.out.println("sum: " + sum);
// @ResponseBody 会自动的将返回值转换成JSON格式
// 但是你必须添加jackson的jar包!!!
return sum;
}
@RequestMapping(value = "/getUser/{userId}", method = RequestMethod.POST)
public @ResponseBody User getUser(@PathVariable("userId")String userId) {
System.out.println("根据ID获取用户对象: " + userId);
Map<String,User> users = new HashMap<String,User>();
users.put("1", new User("123456", "李逵", "123", "成都市", "1", 23));
users.put("2", new User("565676", "张三", "123", "北京市", "2", 53));
users.put("3", new User("325566", "李四", "123", "河南省", "2", 93));
users.put("4", new User("989654", "刘邦", "123", "蒙古包", "1", 13));
users.put("5", new User("234444", "王熙凤", "123", "成都市", "1", 43));
return users.get(userId);
}
@RequestMapping(value = "/userList", method = RequestMethod.POST)
public @ResponseBody
List<User> getUsers() {
List<User> users = new ArrayList<User>();
users.add(new User("123456", "李逵", "123", "成都市", "1", 23));
users.add(new User("123457", "李四", "124", "北京市", "2", 53));
users.add(new User("123458", "李三", "125", "河南市", "0", 73));
users.add(new User("123459", "李五", "126", "大路市", "3", 93));
return users;
}
@RequestMapping(value = "/userMap", method = RequestMethod.POST)
public @ResponseBody Map<String,User> getUserMap() {
Map<String,User> users = new HashMap<String,User>();
users.put("1", new User("123456", "李逵", "123", "成都市", "1", 23));
users.put("2",new User("123457", "李四", "124", "北京市", "2", 53));
users.put("3",new User("123458", "李三", "125", "河南市", "0", 73));
users.put("4",new User("123459", "李五", "126", "大路市", "3", 93));
return users;
}
}
4 sprinmcv与jquery,json整合页面
Html代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ 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=UTF-8">
<title>Spring MVC</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.json-2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.ajax( {
type : 'GET',
contentType : 'application/json',
url : '${pageContext.request.contextPath}/user/list.do',
dataType : 'json',
success : function(data) {
if (data && data.success == "true") {
$('#info').html("共" + data.total + "条数据。<br/>");
$.each(data.data, function(i, item) {
$('#info').append("编号：" + item.id + "，姓名：" + item.name + "，年龄：" + item.age+"<br>");
});
}
},
error : function() {
alert("error")
}
});
$("#submit").click(function() {
var jsonuserinfo = $.toJSON($('#form').serializeObject());
alert(jsonuserinfo);
jQuery.ajax( {
type : 'POST',
contentType : 'application/json',
url : '${pageContext.request.contextPath}/user/add.do',
data : jsonuserinfo,
dataType : 'json',
success : function(data) {
if (data && data.success == "true") {
$('#info').html("共" + data.total + "条数据。<br/>");
$.each(data.data, function(i, item) {
$('#info').append("编号：" + item.id + "，姓名：" + item.name + "，年龄：" + item.age+"<br>");
});
alert("新增成功！");
}
},
error : function(data) {
alert("error")
}
});
});
});
//将一个表单的数据返回成JSON对象
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
</script>
</head>
<body>
<div id="info"></div>
<form action="add" method="post" id="form">
编号：<input type="text" name="id"/>
姓名：<input type="text" name="name"/>
年龄：<input type="text" name="age"/>
性别: <select name="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
密码: <input name="password">
地址:<input name="address"/>
<input type="button" value="提交" id="submit"/>
</form>
</body>
</html>
5 sprinmcv与jquery,json后台代码
Java代码
package com.liuzd.sj.web;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.http.HttpEntity;
import org.springframework.stereotype.Controller;
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 org.springframework.web.bind.annotation.SessionAttributes;
import com.liuzd.sj.entity.User;
@Controller
@RequestMapping("/user")
@SessionAttributes("users")
public class DemoController {
@RequestMapping(value = "/list", method = RequestMethod.GET)
@ModelAttribute("users")
@ResponseBody
public Map<String, Object> getUserMaps() {
List<User> list = new ArrayList<User>();
User um = new User();
um.setId("1");
um.setName("sss");
um.setAge(66);
list.add(um);
um = new User();
um.setId("2");
um.setName("aaa");
um.setAge(44);
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>();
modelMap.put("total", list.size());
modelMap.put("data", list);
modelMap.put("success", "true");
return modelMap;
}
@RequestMapping(value = "/add", method = RequestMethod.POST)
@ResponseBody
//二种方式: A HttpEntity<User> B使用注解 @ResponseBody
public Map<String, Object> addUser(HttpEntity<User> model,javax.servlet.http.HttpServletRequest request) {
System.out.println("user: " + model.getBody());
Map<String, Object> map = (Map)request.getSession().getAttribute("users");
if(null == map){
map = getUserMaps();
}
List<User> list = (List<User>)map.get("data");
list.add(model.getBody());
map.put("total", list.size());
map.put("data", list);
request.getSession().setAttribute("users",map);
return map;
}
@RequestMapping("/ajaxPage")
public String ajaxAddPage() {
return "ajax-add-page2";
}
}
6 web.xml
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app 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">
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/classes/log4j.properties</param-value>
</context-param>
<context-param>
<param-name>log4jRefreshInterval</param-name>
<param-value>60000</param-value>
</context-param>
<context-param>
<param-name>log4jExposeWebAppRoot</param-name>
<param-value>false</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.util.Log4jConfigListener
</listener-class>
</listener>
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>
org.springframework.web.filter.CharacterEncodingFilter
</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>false</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>*.jsp</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
分享到：
发表评论
-
spring mvc 好的文档
2014-03-30 13:32 381http://jinnianshilongnian.iteye ... -
Spring dataSource配置
2012-11-12 14:32 715不管通过何种持久化 ... -
Spring MVC 3 深入总结
2012-07-24 15:24 830引自http://blog.csdn.net/sunitjy/ ... -
惯例优先原则
2012-07-24 14:53 103113.11. 惯例优先原则（convention over c ... -
基于Spring MVC的Web应用开发(3) - Resources
2012-07-17 14:12 1635基于Spring MVC的Web应用开发(3) - Resou ... -
Spring AOP 日志管理
2012-07-17 13:19 952Spring AOP http://blog.chinaun ... -
Spring AOP 日志管理
2012-07-17 13:18 0Spring AOP http://blog.chinau ...
相关推荐
**SpringMVC整合jdbc+json实例** 在Java Web开发中，SpringMVC作为一个强大的MVC框架，被广泛用于构建高效、可维护的Web应用程序。它提供了丰富的功能，包括请求处理、视图解析、数据绑定以及依赖注入等。而jdbc...
**SpringMVC整合jdbc+json** 是一个典型的后端开发示例，主要展示了如何在SpringMVC框架下，结合JDBC进行数据操作，并利用JSON进行数据传输。这个项目适合初学者学习，它提供了完整的配置和代码，使得可以直接运行。...
Spring MVC、MyBatis、jQuery EasyUI、JSON 和 Log4j 是常见的 Java Web 开发技术栈，它们在构建高效、可维护的Web应用程序中扮演着重要角色。下面将详细介绍这些技术及其整合应用。 1. Spring MVC：Spring MVC 是 ...
在这个项目中，"springmvc mongodb jquery 实现用户操作"，我们将深入探讨如何整合这三个技术来构建一个能够处理用户操作的Web应用程序。 首先，SpringMVC是Spring框架的一个模块，专门用于构建MVC（Model-View-...
在这个主题"springmvc-ajax-json"中，我们将深入探讨如何在Spring MVC中整合jQuery和Jackson库，实现前端与后端的数据交互，特别是在使用Ajax进行异步请求时。 首先，Spring MVC 提供了Controller接口和@...
总结，通过整合SpringMVC、Mybatis和Ajax技术，我们可以构建一个高效、用户体验优良的学生管理系统。这种架构不仅简化了开发流程，还使得系统更加健壮、易维护。对于教育行业的信息化建设来说，这样的技术组合无疑是...
**整合Spring MVC、MyBatis与JQueryEasyUI** 将这三个技术结合使用，可以构建出功能强大、用户体验良好的企业级Web应用。Spring MVC作为前端控制器，处理HTTP请求，调用MyBatis执行数据库操作，返回数据给前端。...
SpringMVC与MyBatis的整合主要有以下几个关键步骤： 1. **配置SpringMVC**：首先，我们需要在web.xml中配置DispatcherServlet，并指定SpringMVC的配置文件路径。接着，在SpringMVC的配置文件中，配置视图解析器（如...
下面我们将详细探讨SSM框架与JSON的整合以及相关知识点。 首先，Spring框架作为整个项目的基石，主要负责依赖注入（Dependency Injection，DI）和面向切面编程（Aspect-Oriented Programming，AOP）。在整合JSON的...
在Ajax与SpringMVC的集成中，SpringMVC可以通过`@ResponseBody`注解将方法的返回值直接转换为JSON格式，然后通过Ajax的`dataType: 'json'`设置，前端可以方便地解析这些数据。 具体实现步骤如下： 1. **配置...
8. **前端交互**：在HTML页面（如index.html和login.html）中，使用JavaScript或jQuery与后端进行交互，包括AJAX请求和WebSocket连接的建立。 9. **静态资源管理**：了解`statics`目录下的静态文件如CSS、...
【标题】"spring3mvc-jQuery-easyUI做的ajax版本用户管理系统" 提供了一个使用SpringMVC、jQuery和easyUI框架构建的Web应用程序实例，它着重于实现基于Ajax的用户管理功能。这个项目展示了如何将这三个强大的技术...
《jQuery EasyUI 1.5.1与SpringMVC整合详解》 jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的用户界面组件，如表格、表单、对话框、菜单、滚动条等，极大地简化了网页开发过程。在1.5.1版本中，...
7. **Spring MVC与Ajax的结合**：Spring MVC支持JSON和XML等多种数据格式，这使得它与Ajax的集成非常方便。通过配置`MessageConverter`，可以自动将Java对象转换为JSON或XML响应。 以上就是使用Spring MVC整合Ajax...
【标题】"springmvc+ajax+mybatis前后端整合珍藏版"涉及到的是一个完整的Web开发框架集成，其中SpringMVC作为后端控制层，MyBatis作为持久层框架，而Ajax则是前端与服务器交互的重要技术。这个整合教程提供了一个...
综上所述，"基于SpringMVC+EasyUI+权限控制的后台管理系统"整合了强大的后端处理能力与直观的前端展示效果，结合数据库，可快速搭建出功能完备的管理平台。在实际应用中，开发者通常还需要考虑权限控制，例如基于...
Mybatis SpringMVC是一个...通过Mybatis、SpringMVC和jQuery的组合，开发者可以快速构建出功能完善的Web应用，实现高效的数据操作和流畅的用户体验。同时，这种架构也具备良好的扩展性和维护性，便于项目的长期发展。
2. **MyBatis作为数据访问层**：与数据库交互，执行SQL语句，返回结果集。SpringMVC可以通过MyBatis的SqlSessionTemplate或SqlSessionFactoryBean来集成MyBatis，实现DAO层的代码。 3. **EasyUI构建前端界面**：在...
本项目"springmvc_mybatis1208"是一个典型的SSM（Spring、SpringMVC、MyBatis）整合案例，涵盖了商品管理的全部操作，包括增、删、改、查功能，同时也融合了JSON、Ajax、JSP、JavaScript和jQuery等技术，为开发者...