Spring MVC 前后端 Json 方式交互和处理
众所周知,在mvc中,数据是在各个层次之间进行流转是一个不争的事实。
而这种流转,也就会面临一些困境,这些困境,是由于数据在不同世界中的表现形式不同而造成的。
数据在页面上是一个扁平的,不带数据类型的字符串,无论你的数据结构有多复杂,数据类型有多丰富。
到了展示的时候,全都一视同仁的成为字符串在页面上展现出来。
数据在Java世界中可以表现为丰富的数据结构和数据类型,你可以自行定义你喜欢的类。
在类与类之间进行继承、嵌套。我们通常会把这种模型称之为复杂的对象树。
Spring MVC 其中一种解决方式,将 Java 世界中复杂的数据结构映射为 Json 进行 view 层的展示和流转。
1. 前端组织数据结构 POST 到后台处理
var datas = new Object();
var fields = ["致命",连击","连击次","命中","混乱","封印","遗忘","鬼火"];
$("#table").find("tr").each(function(i) {
//这一句保证遍历的行是勾选了的
if($(this).children("#cbox").children("input#operation").prop("checked")){
$(this).find("td").each(function(j) {
if(j>0){
var field = fields[j];
datas[field] = $(this).text();
}
});
}
});
a. 项目采用 Spring MVC 后端交互时都是将数据映射为 Json 给前端处理,或者需要将表格信息组织后成 Json post 给后台处理;
在 Action 方法头添加注解 @ResponseBody ,添加 jackson-core-asl-*.jar jackson-mapper-asl-*.jar
b. JQuery 中,遍历 table 中的 行 和 列,类似于循环嵌套
c. 循环每行,保存这一行中的每一列的数据,组成 Jsonobject 对象,{"致命":"1",连击":"2","连击次":"3","命中":"4","混乱":"5","封印":"6","遗忘":"7","鬼火":"8"}
e. 将每行的 jsonobject 对象保存到 Jsonarray 对象中,类似与
[{"致命":"1",连击":"2","连击次":"3","命中":"4","混乱":"5","封印":"6","遗忘":"7","鬼火":"8"},
{"致命":"1",连击":"2","连击次":"3","命中":"4","混乱":"5","封印":"6","遗忘":"7","鬼火":"8"}]
g. 因为Js是弱引用语言,没有java 那样强硬的数据类型,上面 Jsonobjec 和 Jsonarray 对象是相对于传递到后台之后,解析所使用到的对象
h. 上面定义的 var fields = ["致命",连击","连击次","命中","混乱","封印","遗忘","鬼火"] 类似与 map 中的 key,而遍历每行中的每一个元素的时候,将对应的 {key:value,}存放到 object 中
i. Java 世界中的 map 可以用 Js 中 object()对象表示, list<map> 可以用 Array[object{}] 对象,突然感觉 js 中 object()对象很牛逼,但是这样比较危险,不安全
2. 定义映射规则,获取业务数据返回前端
a.首先查询数据表得到的数据,需要一个 list 来存储,list 里面的元素是map<string,object>。
b.关于数据库增、删、改、查,根据 javabean 注解增、删、改、查的封装,后面有机会的话在总结。
List<Map<String,Object>> result = queryer.getlist(select * from school);
d.可以将查询到结果 List<Map<String,Object>>,对应一个标示符 key, 放入map 中,返回到前台展示,顺便加入查询状态。
returnmap.put("school", result);
returnmap.put("success", true);
e.整个页面和后台的交互都是通过 ajax 异步进行
$.ajax({
url : '/service/xxx_object_mapping/xxxx_method_mapping',
type : 'GET',
dataType : 'json',
success : function(data){
if(data.success){
//console.log(JSON2.stringify(data.school));
schoolxx = data.school; //动态生成表格的行,先组织好要设定的属性,比如这里,给每行的学校名称,显示一张照片,给一个点击响应的事件,只要你能在前端组织好的属性,都可以放到这里动态生成
row += '<div class="row-fluid"><ul class="thumbnails">';
$.each(schoolxx, function(index, school){
row += '<li class="span2 font thumbnail" >';
row += '<a href="#" onclick="open(\''+ school.smx + '\',\'' + school.smy+ '\');">';
row += '<img data-holder-rendered="true" src="/style/images/bb1.png" + '"';
row += 'style="height:120x; width:130px;" alt="' + school.name+ '">';
row += '<br>' + school.name + '</a></li>';
});
row += "</ul></div>";
$("#schooleTabody").append($(row));
}else
alert(data.error);
},
error : function(data){
alert(data.error);
}
});
f.通过ajax 访问后台,返回的是 map ,前台 ajax 自动会解析为 jsonarray,
success : function(data)
这一部分是成功后的回调函数,data 是后台返回过来的 map。
g.JQuery $.each 的遍历函数,很好的解决了前台遍数据库返回的 List<Map<String,Object>> 数据类型。
h.list 中含有几个元素,前台动态产生几行,或者是几列,或者是几个便签页.........添加其中的属性,响应事件都可以实现。
i.动态生成的时候需要注意转义字符。
3. 常用转义字符
Spring MVC 前后端 Json 方式交互和处理的更多相关文章
- Spring MVC前后端的数据传输
本篇文章主要介绍了Spring MVC中如何在前后端传输数据. 后端 ➡ 前端 在Spring MVC中这主要通过Model将数据从后端传送到前端,一般的写法为: @RequestMapping(va ...
- Spring MVC前后端数据交互总结
控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...
- 1.4(Spring MVC学习笔记)JSON数据交互与RESTful支持
一.JSON数据交互 1.1JSON简介 JSON(JavaScript Object Notation)是一种数据交换格式. 1.2JSON对象结构 {}代表一个对象,{}中写入数据信息,通常为ke ...
- Spring mvc,jQuery和JSON数据交互
一.实验环境的搭建 1.Spring mvc jar. 导入spring mvc运行所需jar包.导入如下(有多余) 2.json的支持jar 3.加入jQuery. 选用jquery-3.0.0.m ...
- 关于使用spring mvc前后端上传数据日期格式
前端页面传入数据到后台,String,int等等类型都很友好,但是Date类型不能直接上传到服务器.否则会报异常. Role management ...
- .net开发windows服务小结
今天学习了在.net下创建一个windows服务,总结一下学习心得. 开发环境:visual studio 2012 一.编写程序 (1)创建一个空解决方法 (2)添加一个控制台应 ...
- AS与.net的交互——详解UrlRequest
在.net中我们知道有一个叫做WebHttpRequest的东西,用它我们可以实现各种网络偷窥,监控,采集和机器人,如果外加一 个模式识别,那真是吊爆了... 在as中我们也可以实现同样的功能,而且我 ...
- keepalived高可用反向代理的nginx
实验系统: (1)CentOS 6.6_x86_64: (2)共有三台主机,本实验以ip地址来命名主机,即131主机.132主机.133主机. 实验前提:防火墙和selinux都关闭,主机之间时间同步 ...
- CentOS7 (64位) 下QT5.5 连接MySQL数据库(driver not loaded)
用qt连接MySQL需要共享库 libqsqlmysql.so的驱动,路径在plugin/sqldrivers目录下,乍看已经可用了,其实不然. 用ldd命令分析一下,libmysqlclient_r ...
- mysql 将列值转变为列的方法(转)
转自http://www.jb51.net/article/36497.htm -- 创建库CREATE TABLE `rate` ( `uname` VARCHAR (300), `object` ...
- KVM 介绍(6):Nova 通过 libvirt 管理 QEMU/KVM 虚机 [Nova Libvirt QEMU/KVM Domain]
学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I/O PCI/PCIe设备直接分 ...
- [转]在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView
本文转自:http://www.cnblogs.com/powertoolsteam/p/MVC5_GridView_2.html 背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5 ...