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. 常用转义字符