JQuery 常用积累(一)前后台数据交互和处理-阿里云开发者社区

开发者社区> shy丶gril> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
后台处理
后台处理 Tape (一个轻快的,事务性的,基于文件的FIFO的库) Android (Priority Job Queue 一个专门为Android轻松调度任务的工作队列)
577 0
【前台 乱码】 前台单独乱码+后台往前台传输的数据乱码
解决方法: 第一:      这句话是加在每个页面的最上面,在之前加的  并且  request.setCharacterEncoding("gb2312");第二:   配置Tomcat的 server.xml。
851 0
json的使用 前后台统一以对象的方式编程 (转)
前台插件的介绍 jquery.json 插件{jQuery插件} 主要方法: $.toJSON(json对象): 将json对象转化为字符串 $.evalJSON(str): 将字符串转化为json对象 插件下载: jquery.
898 0
jquery formatCurrency货币格式化处理
jquery formatCurrency是一个对货币格式进行格式化输入控制、显示的一个jquery插件,可以对文本框输入进行货币合法性验证,并且支持对文本输入字符串进行格式化显示。(国内的会计记账法是保留两位小数,整数位每3个千位使用,号隔开) 1.
796 0
jquery事件的常用方法
单击按钮 ,按钮消失 $(document).ready(function(){ $("button").click(function(){ $(this).
784 0
jquery常用代码片段
1)判断一个元素是否存在 使用jQuery判断元素是否存在,非常的简单。对于一个jQuery对象,我们只需要用length属性即可判断元素是否存在,如果存在肯定是大于0,示例代码: 判断这个图片是否存在,如果存在在把这个图片替换 $(document).
803 0
+关注
1878
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载