JQuery 常用积累（一）前后台数据交互和处理

1. 遍历表格中的所勾选的行，组织数据结构，传递到后台处理：

        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.项目中遇到这种场景比较多，需要将表格信息组织后传递给后台处理；

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 对象是相对与传递到后台之后，解析所用到的对象，在js 中用 object()对象进行存储；

h.上面定义的 var fields = ["致命",连击","连击次","命中","混乱","封印","遗忘","鬼火"] 类似与 map 中的 key,而遍历每行中的每一个元素的时候，将对应的 {key:value,}存放到 object 中；
i.js 中的 map 可以用 object()对象， list<map> 可以用 object(() 对象,突然感觉 js 中 object()对象很牛逼，但是这样比较危险，不安全；

回到顶部

2. 后台得到数据库查询数据，前台进行遍历展示：

a.首先查询数据表得到的数据，需要一个 list 来存储，list 里面的元素是map<string,object>;

b.关于数据库增、删、改、查，根据 javabean 注解增、删、改、查的封装，后面有机会的话在总结；

c.

      List<Map<String,Object>> result = selecter.list(select * from school);

d.可以将查询到结果 List<Map<String,Object>>，对应一个标示符 key， 放入map 中，返回到前台展示,顺便加入查询状态；

returnmap.put("school", result);
returnmap.put("success", true);

e.因为项目采用的是spring MVC ,整个页面和后台的交互都是通过 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>";     
                    $(".container-fluid").append($(row));
                }else{
                    showAlert($(".container-fluid"), "错误提示！", data.error, "error", true);
                }
            },
            error        :    function(data){
                showAlert($(".container-fluid"), "错误!", "连接服务器失败!", "error", true);
            }
        });

f.通过ajax 访问后台，返回的是 map ,前台 ajax 自动会解析为 jsonarray,  

success     :    function(data)

这一部分是成功后的回调函数，data 是后台返回过来的 map;


g.JQuery $.each 的遍历函数，很好的解决了前台遍数据库返回的 List<Map<String,Object>> 数据类型；

h.list 中含有几个元素，前台动态产生几行，或者是几列，或者是几个便签页.........添加其中的属性，响应事件都可以实现；

i.动态生成的时候需要注意转义字符;

作者：Orson 
出处：http://www.cnblogs.com/java-class/ 
如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】 
如果，您希望更容易地发现我的新博客，不妨点击一下左下角的【关注我】 
如果，您对我的博客内容感兴趣，请继续关注我的后续博客，我是【Orson】 

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段 声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 

转载：http://www.cnblogs.com/java-class/p/4505921.html