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="#" 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>"; $(".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

目录
相关文章
|
2月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
41 0
|
2月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
45 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
81 0
|
2月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
46 1
|
2月前
|
JavaScript 前端开发 Python
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
|
8月前
|
JSON JavaScript 数据格式
jQuery将json性别数据int类型进行格式化渲染
jQuery将json性别数据int类型进行格式化渲染
33 0
|
8月前
|
JavaScript 前端开发
JQuery 获取选中多选框的value,合并成数组传给后台
JQuery 获取选中多选框的value,合并成数组传给后台
28 0
|
8月前
|
JavaScript
JQuery 获取选中多选框的value,合并成字符串传给后台
JQuery 获取选中多选框的value,合并成字符串传给后台
32 0
|
8月前
|
JavaScript
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
28 0
|
8月前
|
JSON 前端开发 JavaScript
ajax请求接口,jquery拼接数据循环
ajax请求接口,jquery拼接数据循环
51 0