Spring MVC 前后端 Json 方式交互和处理

众所周知，在mvc中，数据是在各个层次之间进行流转是一个不争的事实。

而这种流转，也就会面临一些困境，这些困境，是由于数据在不同世界中的表现形式不同而造成的。

　数据在页面上是一个扁平的，不带数据类型的字符串，无论你的数据结构有多复杂，数据类型有多丰富。

到了展示的时候，全都一视同仁的成为字符串在页面上展现出来。

　数据在Java世界中可以表现为丰富的数据结构和数据类型，你可以自行定义你喜欢的类。

在类与类之间进行继承、嵌套。我们通常会把这种模型称之为复杂的对象树。

　　Spring MVC 其中一种解决方式，将 Java 世界中复杂的数据结构映射为 Json 进行 view 层的展示和流转。

回到顶部

1. 前端组织数据结构 POST 到后台处理

Spring MVC 前后端 Json 方式交互和处理

        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="#"  οnclick="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 方式交互和处理

本文转自Orson博客园博客，原文链接：http://www.cnblogs.com/java-class/p/4505921.html，如需转载请自行联系原作者

Spring MVC 前后端 Json 方式交互和处理

1. 前端组织数据结构 POST 到后台处理

2. 定义映射规则，获取业务数据返回前端

3. 常用转义字符

相关推荐