jQuery插件第五十五：批量获取值返回Json字符串

来源：互联网发布：软件测试流生命周期编辑：程序博客网时间：2024/05/01 06:02

对各种表单元素统一使用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 builder = function(row){                      var jo={};                      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>

0 0