JQuery 常用积累(一)前后台数据交互和处理
2015-05-15 15:02
375 查看
1. 遍历表格中的所勾选的行,组织数据结构,传递到后台处理:
![](http://images0.cnblogs.com/blog2015/362169/201505/151444188921205.png)
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.动态生成的时候需要注意转义字符;
![](http://images0.cnblogs.com/blog2015/362169/201505/160921239701376.png)
相关文章推荐
- 利用json处理jquery和后台的数据交互的例子
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- C#后台数据处理常用方法
- jquery的$.ajax()利用FormData数据类型与php后台交互
- 通过jquery的serializearray处理表单数据成json格式,并提交到后台处理
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- 模态对话框+父子窗口交互+后台数据处理+刷新父页面
- jquery与后台进行数据交互--前台发单一数据对象,后台返回一个json字符串 serlet配置页面
- jquery的ajax请求处理以及处理后台java传的json数据
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- jQuery miniui grid 分页数据后台处理 基于springmvc 和hibernate
- Jquery 使用Ajax获取后台返回的Json数据后,页面处理
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- EasyUI+Ajax+Json+一般处理程序实现数据的前台与后台的交互
- PHP后台数据处理及与web端进行数据交互
- jquery异步ajax超大长度base64图片长字段数据传输问题解决办法和php后台处理办法
- jquery的$.ajax()利用json数据类型与php后台交互
- Jquery 使用Ajax获取后台返回的Json数据后,页面处理