(Spring4 json入门)Spring4+SpringMVC+页面数据发送与接收(json格式)
jar包(Maven仓库):
在测试过程中我查看了网上的一些教程,但是那些教程都是在Spring3环境下的,Spring3和Spring4解析json需要的jar文件不同.
在这里贴出Sring3解析json需要的jar
1,页面获取后端数据
jQuery.ajax( {
type : "GET",
contentType : "application/json",
url : "<%=request.getContextPath()%>/easyui/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.username
+ "，年龄：" + item.age);
});
}
},
error : function() {
alert("error")
}
});
jqunery ajax get 向controller请求数据contentType : "application/json", json格式,url为请求的地址,请求成功之后json数据添加到页面
@RequestMapping(value = "/list", method = RequestMethod.GET,consumes="application/json")
@ResponseBody
public Map<String, Object> getUserList() {
List<UserModel> list = new ArrayList<UserModel>();
UserModel um = new UserModel();
um.setId("1");
um.setUsername("sss");
um.setAge(222);
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>(3);
modelMap.put("total", "1");
modelMap.put("data", list);
modelMap.put("success", "true"); return modelMap;
}
@ResponseBody 表示自动将页面json数据封装进对象只在contentType : "application/json",情况下允许.
2.向后端发送页面数据
//将一个表单的数据返回成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;
};
$("#submit").click(function() {
var jsonuserinfo = $.toJSON($("#form").serializeObject()); //$.toJSON($("#form")是 jqunery.json.js中的方法
alert(jsonuserinfo); jQuery.ajax( { type : "POST", //contentType: "application/json; charset=utf-8", contentType : 'application/json', url : "<%=request.getContextPath()%>/easyui/add.do", data : jsonuserinfo, dataType : "json", success : function(data) { alert("新增成功！"); }, error : function(data) { alert("error") } }); });
serializeObject()方法将表单内容转换成json字符串,jqunery的json对象和json字符串之间的转换也许需要jqunery插件包
jquery.json-2.2.min.js jquery提供的json包
json2.js json官网提供的json包
var obj = JSON.parse(jsonuserinfo); //字符串转json对象,json2.js中的方法
var c = JSON.stringify(obj); //json对象转字json符串,json2.js中的方法
json对象和字符串的转换有很多种方式,具体的可以看其他的教程.
@RequestMapping(value = "/add", method = RequestMethod.POST,consumes="application/json")
@ResponseBody
public Map<String, String> addUser(@RequestBody UserModel model) {
//System.out.println(123);
int s = model.getAge();
String ss = model.getId();
String sss = model.getUsername();
TestUtil.test(s+ss+sss); Map<String, String> map = new HashMap<String, String>(1);
map.put("success", "true");
return map;
}
@ResponseBody会自动将页面发送的json字符串解析成java对象,其实json对象底层就是map集合对象,java提供了工具可以将map集合转换成json对象,当然json对象和json数组的概念还是需要大家花费一些时间理解的 以下是全部代码:
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.*,java.sql.*" errorPage="" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="<%=basePath%>"> <title>Spring MVC</title>
<script src="${pageContext.request.contextPath}/static/editormd/examples/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.json-2.2.min.js"></script>
<script type="text/javascript">
//将一个表单的数据返回成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;
}; $(document).ready(function() {
jQuery.ajax( {
type : "GET",
contentType : "application/json",
url : "<%=request.getContextPath()%>/easyui/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.username
+ "，年龄：" + item.age);
});
}
},
error : function() {
alert("error")
}
});
$("#submit").click(function() {
var jsonuserinfo = $.toJSON($("#form").serializeObject());
alert(typeof jsonuserinfo);
jQuery.ajax( {
type : "POST",
//contentType: "application/json; charset=utf-8",
contentType : 'application/json', url : "<%=request.getContextPath()%>/easyui/add.do",
data : jsonuserinfo,
dataType : "json",
success : function(data) {
alert("新增成功！");
},
error : function(data) {
alert("error")
}
});
});
});
</script>
</head>
<body>
<div id="info"></div>
<form action="<%=request.getContextPath()%>/easyui/add.do" method="post" id="form">
编号：<input type="text" name="id" value="12"/>
姓名：<input type="text" name="username" value="走走走"/>
年龄：<input type="text" name="age" value="44"/> <input type="button" value="提交" id="submit"/>
</form>
</body>
</html>
HTML代码
/**
*
* Spring4 json test start -------------------------------
* @return
*/
@RequestMapping(value = "/list", method = RequestMethod.GET,consumes="application/json")
@ResponseBody
public Map<String, Object> getUserList() {
TestUtil.test("123"); List<UserModel> list = new ArrayList<UserModel>();
UserModel um = new UserModel();
um.setId("1");
um.setUsername("sss");
um.setAge(222);
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>(3);
modelMap.put("total", "1");
modelMap.put("data", list);
modelMap.put("success", "true"); return modelMap;
} /**
* Spring4 json test
* @return
*/
@RequestMapping(value = "/add", method = RequestMethod.POST,consumes="application/json")
@ResponseBody
public Map<String, String> addUser(@RequestBody UserModel model) {
//System.out.println(123);
int s = model.getAge();
String ss = model.getId();
String sss = model.getUsername();
TestUtil.test(s+ss+sss); Map<String, String> map = new HashMap<String, String>(1);
map.put("success", "true");
return map;
}
Java代码
package com.zlay.pojo;
public class UserModel{
/**
*
* Spring4 json test class
* @return
*/
private String id;
private String username;
private int age ;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
UserModel类
(Spring4 json入门)Spring4+SpringMVC+页面数据发送与接收(json格式)的更多相关文章
- ASP.NET POST XML JSON数据,发送与接收
接收端通过Request.InputStream读取:byte[] byts = new byte[Request.InputStream.Length];Request.InputStream.Re ...
- [java,2018-01-16] HttpClient发送、接收 json 请求
最近需要用到许多在后台发送http请求的功能,可能需要发送json和xml类型的数据. 就抽取出来写了一个帮助类: 首先判断发送的数据类型是json还是xml: import org.dom4j.Do ...
- 使用httperrequest,模拟发送及接收Json请求
使用httpreques\Json-Handle\tcpdump\wireshark工具进行,抓取手机访问网络的包,分析request及response请求,通过httprequester来实现模拟发 ...
- 使用firefox插件httperrequest,模拟发送及接收Json请求 【转】
转自[http://blog.csdn.net/feixue1232/article/details/8535212] 目标:使用httpreques\Json-Handle\tcpdump\wire ...
- L2CAP数据发送和接收
ACL 链路在 Bluetooth 中非常重要,一些重要的应用如 A2DP, 基于 RFCOMM 的应用.BNEP等都要建立 ACL 链路,发送/接收ACL 包.跟大家一起来分析 ACL 包发送/接收 ...
- Jquery的$.ajax、$.get、$.post发送、接收JSON数据及回调函数用法
平时研究代码时,经常会遇到AJAX的相关用法,做项目时才真正体会到Ajax的强大之处(与服务器数据交互如此之便捷,更新DOM节点而不用刷新整个页面),以及运用的频繁程度.今天整理了一下自己之前没搞清楚 ...
- 使用HttpRequester模拟发送及接收Json请求
1.开发人员在火狐浏览器里经常使用的工具有Firebug,httprequester,restclient......火狐浏览器有一些强大的插件供开发人员使用!需要的可以在附加组件中扩展. 2.htt ...
- JSON入门指南--客户端处理JSON
在传统的Web开发过程中,前端工程师或者后台工程师会在页面上写后台的相关代码,比如在ASP.NET MVC4里面写如下代码: @Html.TextBoxFor(m => m.UserName, ...
- jQuery form插件的使用--处理server返回的JSON， XML，HTML数据
详细代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> & ...
随机推荐
- Android学习第二天-android常用命令
上一篇文章中,我们重点讲解了adb的常用命令,下面我们一起来看看其它常用的命令 2 android 2.1 查看机器上所有已经安装的Android版本和AVD设备 2.1.1查看机器上已经安装的AVD ...
- [ASP.NET MVC 小牛之路]01 - 理解MVC模式
本人博客已转移至:http://www.exblr.com/liam PS:MVC出来很久了,工作上一直没机会用.出于兴趣,工作之余我将展开对MVC的深入学习,通过博文来记录所学所得,并希望能得到各 ...
- WCF学习之旅—WCF第二个示例（七）
三.创建客户端应用程序 若要创建客户端应用程序,你将另外添加一个项目,添加对该项目的服务引用,配置数据源,并创建一个用户界面以显示服务中的数据. 在第一个步骤中,你将 Windows 窗体项目添加到解 ...
- Distributed3：SQL Server 创建分布式数据库
分布式数据库的优势是将IO分散在不同的Physical Disk上,每次查询都由多台Server的CPU,I/O共同负载,通过各节点并行处理数据来提高性能,劣势是消耗大量的网络带宽资源,管理难度大.在 ...
- MyEclipse 2014（激活）
激活 破解附件包下载:http://pan.baidu.com/s/1c27Dwe0 提取密码:qy38 详细破解步骤请参考:http://blog.my-eclipse.cn/myeclipse-2 ...
- 【原创】开源Math.NET基础数学类库使用(14)C#生成安全的随机数
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...
- 把DATATABLE,DS中的内容用HTML的方式显示
前几天,在搞一个数据显示的时候,因为是不固定的列的,所以需要动态创建列,这里面就运用一下,直接把数据库的Table显示在Html上,有两种方法,但是都有相应的缺点,第一个,如果内容太多,长度不好控制, ...
- 基于讯飞语音API应用开发之——离线词典构建
最近实习在做一个跟语音相关的项目,就在度娘上搜索了很多关于语音的API,顺藤摸瓜找到了科大讯飞,虽然度娘自家也有语音识别.语义理解这块,但感觉应该不是很好用,毕竟之前用过百度地图的API,有问题也找不 ...
- EntityFramework 7 Left Join Where is error(Test record)
First of all, my English is very poor, so I may not be a very good expression, very sorry! In this b ...
- 附录E 安装Kafka
E.1 安装Kafka E.1.1 下载Kafka Kafka是由LinkedIn设计的一个高吞吐量.分布式.基于发布订阅模式的消息系统,使用Scala编写,它以可水平扩展.可靠性.异步通信 ...