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. 常用轉義字符