jQuery插件第五十五:批量获取值返回Json字符串
2015-04-17 07:38
447 查看
对各种表单元素统一使用etext()这个方法来获取其中的值,单个输入框返回“[value]”。多个输入框同时取值会自动返回Json格式字符串。 复选框多个选择项的值会用"," 间隔。对没有子节点只有文字内容的span和div取值。在不清楚标签的情况下有用。比如说,在添加商品订单的页面,可针对商品明细表格设置数据行选择器 ,进行json字符串处理,随同订单其他数据一起提交到后端。
以下为调用例子:
/* * jQuery etext plugin 0.2 * * Copyright (c) 2015 chinet_bridge * * 批量获取值返回Json字符串插件 0.2版 * */ //Json对象转字符串 var Obj2str = function (o) { if (o == undefined) { return ""; } var r = []; if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\""; if (typeof o == "object") { if (!o.sort) { for (var i in o) r.push("\"" + i + "\":" + Obj2str(o[i])); if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) { r.push("toString:" + o.toString.toString()); } r = "{" + r.join() + "}" } else { for (var i = 0; i < o.length; i++) { r.push(Obj2str(o[i])); } r = "[" + r.join() + "]"; } return r; } return o.toString().replace(/\"\:/g, '":""'); } ; (function (d, b) { d.fn.etext= function(options){ var defaults={ rowSelector:null}; var opts = d.extend({},defaults, options); var l, k = this,n=[],chkboxname,chkboxlen; d.extend(d.expr[ ":" ], { isText: function( k ) { return d(k).text() != "" && d(k).html().indexOf('>')==-1; } }); if(k.is(":input,:isText")){ k.each(function(){ var m = d(this); if (m.is(":radio")) { chkboxname=''; if(!m.is(":checked")){return true; } l = m.is(":checked")?d.trim(m.val()):""; n.push(l); }else if (m.is(":checkbox")) { if(!m.is(":checked")){return true; } if(chkboxname==m.attr('name')) { l += m.is(":checked")?d.trim(m.val())+ ",":""; chkboxlen--; }else{ l = m.is(":checked")?d.trim(m.val())+ ",":""; chkboxname=m.attr('name'); chkboxlen=d(':checkbox[name='+m.attr('name')+']:checked').length; chkboxlen--; } if(chkboxlen==0){ l =(l+',').replace(',,',''); n.push(l); } }else if(m.is(":input")){ chkboxname=''; l = m.val();l = d.trim(l); n.push(l); }else if(m.is(":isText")){ chkboxname='';l = m.text();l = d.trim(l); n.push(l); } }); }else{ var jo={}; var builder = function(row){ row.find(":input,div,span").each(function(){ var m = d(this); if (m.is(":radio")) { chkboxname=''; if(!m.is(":checked")){return true; } l = m.is(":checked")?d.trim(m.val()):""; jo[m.attr("name")]=l; }else if (m.is(":checkbox")) { if(!m.is(":checked")){return true; } if(chkboxname==m.attr('name')) { l += m.is(":checked")?d.trim(m.val())+ ",":""; chkboxlen--; }else{ l = m.is(":checked")?d.trim(m.val())+ ",":""; chkboxname=m.attr('name'); chkboxlen=row.find(':checkbox[name='+m.attr('name')+']:checked').length; chkboxlen--; } if(chkboxlen==0){ l =(l+',').replace(',,',''); jo[m.attr("name")]=l; } }else if(m.is(":input")){ chkboxname=''; l = m.val(); l = d.trim(l); jo[m.attr("name")]=l; }else if(m.is(":isText")){ chkboxname='';l = m.text();l = d.trim(l); jo[m.attr("name")]=l; } }); //直接push json对象不行,会替换之前的数组元素,调试发现转成字符串就不会造成数组元素的数据错乱 n[n.length] = Obj2str(jo); } if(opts.rowSelector==null){ builder(k); }else{ k.find(opts.rowSelector).each(function(){ var _k=$(this); builder(_k); }); } } return "["+n.join()+"]"; } })(jQuery);
以下为调用例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.etext.js"></script> </head> <body> <form id="form1"> <div id="div1" > <input type="text" id="Text1" name="Text1" /> <input type="text" id="Text11" name="Text11" /> <input type="text" id="Text2" name="Text2" /> <input type="radio" id="Radio1" name="Text5" value="1" /> YES <input type="radio" id="Radio2" name="Text5" value="2" /> No <input type="checkbox" id="chkbox1" name="Chkbox" value="甲" /> 甲 <input type="checkbox" id="chkbox2" name="Chkbox" value="乙" /> 乙 <span id="ufo" name="UFO">4242</span> </div> <div id="div2"> <input type="text" id="Text3" name="Text1" /> <input type="text" id="Text4" name="Text11" /> <input type="text" id="Text5" name="Text2" /> <input type="radio" id="Radio3" name="Text5" value="1" /> YES <input type="radio" id="Radio4" name="Text5" value="2" /> No <input type="checkbox" id="Checkbox1" name="Chkbox" value="甲" /> 甲 <input type="checkbox" id="Checkbox2" name="Chkbox" value="乙" /> 乙 <span id="Span1" name="UFO">4242</span> </div> </form> <input type="button" id="submit" value="获取值" /> <script language="javascript"> $("#submit").click(function () { var json = $("#form1").etext({ rowSelector: "div" }); alert(json); }); </script> </body> </html>
相关文章推荐
- struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
- 关于jQuery,使用getjson传值,返回结果使用字符串拼接
- 使用JQuery.js & JQuery.form.js 插件完成对StrutsAction的异步请求,返回JSON数据
- 借牛人代码一用 , 加载数据: 结合Jquery插件获取Json数据----------jTemplates
- jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
- jquery 中$.post获取MVC Controller中JsonResult返回包含LIst<Model>类型的子List<Model>的高级使用方法
- js与jQuery实现获取table中的数据并拼成json字符串操作示例
- 使用前端使用jQuery获取 在apsx页面的page_load方法直接返回json数据
- ashx页面返回json字符串|jQuery 的ajax处理请求的纠结问题
- jQuery插件第五十四:无区别批量获取值
- jquery 获取并解析哈工大ltp-cloud返回的json数据
- Jquery插件制作经验分享 之 json字符串转换插件(附:jQuery.Json.js)
- jQuery截取{}里的字符串及获取json里的值
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及文件上传的部分
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及非文件上传的部分
- JQuery中get和getJSON方法返回json对象无法获取问题
- jquery与后台进行数据交互--前台发单一数据对象,后台返回一个json字符串 jsp页面
- ajax中接受返回字符串转为json并进行处理(不使用jquery)
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
- JQuery-Ajax获取后台返回的字符串。