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