jsp 实现生成json串的需求

cy6655 2013-03-26 11:09:26
用户在jsp填写不同的参数名称和参数值,层数也是用户自己根据需要增加的,如图(形似):形成一个类似
{
“UserInfo”:{
“UserId”:{“1234567”},
“Password”:{“&^ikyj”},
“trademark”:{“1”}
},
“OfferInfoList”:[
{“Id”:{“23452134”},”Name”:{“name1”},”region”:{“571”},””:{“1”}}
{“Id”:{“23453434”},”Name”:{“name2”},”region”:{“571”},””:{“0”}}
{“Id”:{“23553334”},”Name”:{“name3”},”region”:{“571”},””:{“0”}}
]
}
这样的json串(具体层数深度 都是用户自己添加!),求大神指导jsp的写法,包括js等所有,迫切需要,谢谢了!
...全文
4820 25 打赏 收藏 转发到动态 举报
写回复
用AI写文章
25 条回复
切换为时间正序
请发表友善的回复…
发表回复
cy6655 2013-03-28
  • 打赏
  • 举报
回复
凑合用吧。。 最后拼JSON,拼的累死我了。[/quote] 辛苦了!!!
cy6655 2013-03-28
  • 打赏
  • 举报
回复
引用 19 楼 functionsub 的回复:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSON生成</title>
    <style>
        .sub{
            margin-left:5px;
        }
        div{position:relative;}
        .sub_child{
            margin-left:20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <a href="javascript:void(0)" class="other" self="first_other" id="first_other" level="1">同</a><a self="first_sub" level="1" href="javascript:void(0)" id="first_sub" class="sub">子</a><input self="first_other" type="text" name="pname" level="1" id="first_pname">:<input self="first_sub" level="1" type="text" name="pvalue" id="first_pvalue"/>
            <div class="sub_child"></div>
        </div>
    </div>
    <input value="显示JSON" type="button" id="show" />
    <div id="result"></div>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        var obj = {},sour = {};
        window.onload = function(){
            var d = document,container = $('container');
            function createAttr(level,who,sub){
                var now = (new Date()).getTime();
                var self = 'name'+now;
                var _parent = level==1 ? container : (!sub ? who.parentNode.parentNode : who.parentNode.getElementsByClassName('sub_child')[0]);
                var frag = d.createDocumentFragment();
                var con = d.createElement('div');
                var othera = d.createElement('a');
                othera.href="javascript:void(0)";
                othera.setAttribute('level',level);
                othera.innerHTML = '同'
                othera.setAttribute('self',self);
                var suba = othera.cloneNode();
                suba.innerHTML = '子';
                suba.className = 'sub';
                var attrName = d.createElement('input');
                attrName.name = 'pname';
                attrName.type = 'text';
                attrName.setAttribute('self',self)
                var attrValue = attrName.cloneNode();
                attrValue.name = 'pvalue';
                attrValue.type = 'text';
                attrName.setAttribute('self','name'+now);
                attrValue.setAttribute('self','name'+now);
                attrName.setAttribute('level',level);
                attrValue.setAttribute('level',level);
                con.appendChild(othera);
                con.appendChild(suba);
                con.appendChild(attrName);
                var split = d.createTextNode(':');
                var subcon = d.createElement('div')
                subcon.className= 'sub_child'
                con.appendChild(split);
                con.appendChild(attrValue);
                var del = othera.cloneNode();
                del.innerHTML = '删';
                con.appendChild(del);
                con.appendChild(subcon);
                frag.appendChild(con);
                if(who){
                    var parentName = sub ? who.getAttribute('self') : who.getAttribute('parent');
                    attrName.setAttribute('parent',parentName);
                    attrValue.setAttribute('parent',parentName);
                    othera.setAttribute('parent',parentName);
                    suba.setAttribute('parent',parentName);
                }
                del.onclick = function(){
                    var parent = this.parentNode;
                    parent.parentNode.removeChild(parent)
                }
                _parent.appendChild(frag);
                othera.onclick = function(){
                    var level = this.getAttribute('level');
                    createAttr(level,this);
                };
                suba.onclick = function(){
                    var level = parseInt(this.getAttribute('level'));
                    var parent = this.parentNode;
                    var valueinput = parent.getElementsByTagName('input')[1];
                    if(valueinput.type!='checkbox'){
                        var tip = d.createTextNode('数组');
                        parent.insertBefore(tip,valueinput);
                        var checkbox = valueinput.cloneNode();
                        checkbox.type = 'checkbox';
                        parent.insertBefore(checkbox,tip);
                        parent.removeChild(valueinput);
                    }
                    createAttr(level + 1,this,true);
                }
            }
            function init(){
                var key1 = $('first_other').getAttribute('self');
                $('first_other').onclick = function(){
                    var level = this.getAttribute('level');
                    createAttr(level,this);
                }
                var now = (new Date()).getTime()
                $('first_other').setAttribute('self','name'+now);
                $('first_sub').setAttribute('self','name'+now);
                $('first_pname').setAttribute('self','name'+now);
                $('first_pvalue').setAttribute('self','name'+now);
                $('first_sub').onclick = function(){
                    var level = parseInt(this.getAttribute('level'));
                    var parent = this.parentNode;
                    var valueinput = parent.getElementsByTagName('input')[1];
                    if(valueinput.type!='checkbox'){
                        var tip = d.createTextNode('数组');
                        parent.insertBefore(tip,valueinput);
                        var checkbox = valueinput.cloneNode();
                        checkbox.type = 'checkbox';
                        parent.insertBefore(checkbox,tip);
                        parent.removeChild(valueinput);
                    }
                    createAttr(level + 1,this,true);
                    var self = this.getAttribute('self');
                    sour[self] = {};
                }
            }
            init();
            function gettype(obj){
                return Object.prototype.toString.call(obj);
            }
            $('show').onclick = function(){
                console.log(sour)
                var nameinputs = document.getElementsByName('pname');
                var valueinputs = document.getElementsByName('pvalue');
                var len = nameinputs.length;
                var ip,vip;
                var arr = [],objarr = {};
                for(var i=0;i<len;i++){
                    ip = nameinputs[i],vip = valueinputs[i];
                    var parent = ip.getAttribute('parent');
                    var _k = ip.value,_v = vip.type=='checkbox' ? (vip.checked ? [] : {}) :vip.value,_id = ip.getAttribute('self');
                    var level = parseInt(ip.getAttribute('level'))
                    objarr[_id] = {
                        id:_id,
                        key:_k,
                        value : _v,
                        p : parent,
                        level : level
                    }
                }
                for(var p in objarr){
                    if(objarr[p].p){
                        var pid = objarr[p].p;
                        var selfid = objarr[p].id;
                        if(gettype(objarr[pid].value)=='[object Object]'){
                            objarr[pid].value[selfid] = objarr[p];
                        }else if(gettype(objarr[pid].value)=='[object Array]'){
                            objarr[pid].value.push(objarr[p]);
                        }else{
                            
                        }
                    }
                }
                var _final = {};
                for(var p in objarr){
                    if(objarr[p].level == 1){
                        createObj(objarr[p],_final);
                    }
                }
                function createObj(obj,who){
                    var _type = gettype(obj.value);
                    if(_type=='[object Object]'){
                        !who[obj.key] && (who[obj.key] = {});
                        for(var p in obj.value){
                            createObj(obj.value[p],who[obj.key]);
                        }
                    }else if(_type=='[object Array]'){
                        !who[obj.key] && (who[obj.key] = []);
                        for(var i=0,len=obj.value.length;i<len;i++){
                            var thisobj = {}; 
                            who[obj.key].push(thisobj);
                            
                            createObj(obj.value[i],thisobj);
                        }
                    }else{
                        who[obj.key] = obj.value;
                    }
                }
                $('result').innerHTML = JSON.stringify(_final)
                console.log(_final)
                _final = {}
            }
        }
    </script>
</body>
</html>
凑合用吧。。 最后拼JSON,拼的累死我了。
for(var p in objarr){ if(objarr[p].p){ var pid = objarr[p].p; var selfid = objarr[p].id; if(gettype(objarr[pid].value)=='[object Object]'){ objarr[pid].value[selfid] = objarr[p]; }else if(gettype(objarr[pid].value)=='[object Array]'){ objarr[pid].value.push(objarr[p]); }else{ } } } 你好 请教下 这段代码 ie的调试工具显示objarr[pid].value取不到value值,还有就是最后的else里面没有内容还是?
cy6655 2013-03-28
  • 打赏
  • 举报
回复
引用 10 楼 functionsub 的回复:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSON生成</title>
</head>
<body>
    <div>UserId:<input type="text" id="UserId" /></div>
    <div>Password:<input type="password" id="Password" /></div>
    <div>trademark:<input type="text" id="trademark" /></div>
    <div>OfferInfoList:
        Id:<input type="text" id="Id" />
        Name:<input type="text" id="Name" />
        region:<input type="text" id="region" />
        <input type="button" id="addOfferInfoList" value="添加OfferInfo">
        <div id="offerInfoTip"></div>
    </div>
    <input value="显示JSON" type="button" id="show" />
    <div id="result"></div>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        var obj = {UserId:'',Password:'',trademark:'',OfferInfoList:[]};
        window.onload = function(){
            $('show').onclick = function(){
                var UserId = $('UserId').value;
                var Password = $('Password').value;
                var trademark = $('trademark').value;
                obj.UserId = UserId;
                obj.Password = Password;
                obj.trademark = trademark;
                $('result').innerHTML = JSON.stringify(obj);
            }
            $('addOfferInfoList').onclick = function(){
                var Id = $('Id').value;
                var Name = $('Name').value;
                var region = $('region').value;
                var offerInfo = {
                    Id:Id,
                    Name:Name,
                    region:region
                }
                obj.OfferInfoList.push(offerInfo);
                $('Id').value = '';
                $('Name').value = '';
                $('region').value = '';
                $('offerInfoTip').innerHTML = '已添加'+obj.OfferInfoList.length+'条offerinfo';
            }
        }
    </script>
</body>
</html>
这样?
大神 我能加你QQ不 太崇拜了 膜拜
cy6655 2013-03-28
  • 打赏
  • 举报
回复
引用 24 楼 functionsub 的回复:
XML/HTML code?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091……
恩 这次成功了 幸苦了这么久 万分感谢!!
functionsub 2013-03-28
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSON生成</title>
    <style>
        .sub{
            margin-left:5px;
        }
        div{position:relative;}
        .sub_child{
            margin-left:20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <a href="javascript:void(0)" class="other" self="first_other" id="first_other" level="1">同</a><a self="first_sub" level="1" href="javascript:void(0)" id="first_sub" class="sub">子</a><input self="first_other" type="text" name="pname" level="1" id="first_pname">:<input self="first_sub" level="1" type="text" name="pvalue" id="first_pvalue"/>
            <div class="sub_child"></div>
        </div>
    </div>
    <input value="显示JSON" type="button" id="show" />
    <div id="result"></div>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        var obj = {},sour = {};
        window.onload = function(){
            var d = document,container = $('container');
            function createAttr(level,who,sub){
                var now = (new Date()).getTime();
                var self = 'name'+now;
                var _parent = level==1 ? container : (!sub ? who.parentNode.parentNode : who.parentNode.getElementsByClassName('sub_child')[0]);
                var frag = d.createDocumentFragment();
                var con = d.createElement('div');
                var othera = d.createElement('a');
                othera.href="javascript:void(0)";
                othera.setAttribute('level',level);
                othera.innerHTML = '同'
                othera.setAttribute('self',self);
                var suba = othera.cloneNode();
                suba.innerHTML = '子';
                suba.className = 'sub';
                var attrName = d.createElement('input');
                attrName.name = 'pname';
                attrName.type = 'text';
                attrName.setAttribute('self',self)
                var attrValue = attrName.cloneNode();
                attrValue.name = 'pvalue';
                attrValue.type = 'text';
                attrName.setAttribute('self','name'+now);
                attrValue.setAttribute('self','name'+now);
                attrName.setAttribute('level',level);
                attrValue.setAttribute('level',level);
                con.appendChild(othera);
                con.appendChild(suba);
                con.appendChild(attrName);
                var split = d.createTextNode(':');
                var subcon = d.createElement('div')
                subcon.className= 'sub_child'
                con.appendChild(split);
                con.appendChild(attrValue);
                var del = othera.cloneNode();
                del.innerHTML = '删';
                con.appendChild(del);
                con.appendChild(subcon);
                frag.appendChild(con);
                if(who){
                    var parentName = sub ? who.getAttribute('self') : who.getAttribute('parent');
                    attrName.setAttribute('parent',parentName);
                    attrValue.setAttribute('parent',parentName);
                    othera.setAttribute('parent',parentName);
                    suba.setAttribute('parent',parentName);
                }
                del.onclick = function(){
                    var parent = this.parentNode;
                    parent.parentNode.removeChild(parent)
                }
                _parent.appendChild(frag);
                othera.onclick = function(){
                    var level = this.getAttribute('level');
                    createAttr(level,this);
                };
                suba.onclick = function(){
                    var level = parseInt(this.getAttribute('level'));
                    var parent = this.parentNode;
                    var valueinput = parent.getElementsByTagName('input')[1];
                    if(valueinput.type!='checkbox'){
                        var tip = d.createTextNode('数组');
                        parent.insertBefore(tip,valueinput);
                        var checkbox = valueinput.cloneNode();
                        checkbox.type = 'checkbox';
                        parent.insertBefore(checkbox,tip);
                        parent.removeChild(valueinput);
                    }
                    createAttr(level + 1,this,true);
                }
            }
            function init(){
                var key1 = $('first_other').getAttribute('self');
                $('first_other').onclick = function(){
                    var level = this.getAttribute('level');
                    createAttr(level,this);
                }
                var now = (new Date()).getTime()
                $('first_other').setAttribute('self','name'+now);
                $('first_sub').setAttribute('self','name'+now);
                $('first_pname').setAttribute('self','name'+now);
                $('first_pvalue').setAttribute('self','name'+now);
                $('first_sub').onclick = function(){
                    var level = parseInt(this.getAttribute('level'));
                    var parent = this.parentNode;
                    var valueinput = parent.getElementsByTagName('input')[1];
                    if(valueinput.type!='checkbox'){
                        var tip = d.createTextNode('数组');
                        parent.insertBefore(tip,valueinput);
                        var checkbox = valueinput.cloneNode();
                        checkbox.type = 'checkbox';
                        parent.insertBefore(checkbox,tip);
                        parent.removeChild(valueinput);
                    }
                    createAttr(level + 1,this,true);
                    var self = this.getAttribute('self');
                    sour[self] = {};
                }
            }
            init();
            function gettype(obj){
                return Object.prototype.toString.call(obj);
            }
            $('show').onclick = function(){
                console.log(sour)
                var nameinputs = document.getElementsByName('pname');
                var valueinputs = document.getElementsByName('pvalue');
                var len = nameinputs.length;
                var ip,vip;
                var arr = [],objarr = {};
                for(var i=0;i<len;i++){
                    ip = nameinputs[i],vip = valueinputs[i];
                    var parent = ip.getAttribute('parent');
                    var _k = ip.value,_v = vip.type=='checkbox' ? (vip.checked ? [] : {}) :vip.value,_id = ip.getAttribute('self');
                    var level = parseInt(ip.getAttribute('level'))
                    objarr[_id] = {
                        id:_id,
                        key:_k,
                        value : _v,
                        p : parent,
                        level : level
                    }
                }
                for(var p in objarr){
                    if(objarr[p].p){
                        var pid = objarr[p].p;
                        var selfid = objarr[p].id;
                        if(gettype(objarr[pid].value)=='[object Object]'){
                            objarr[pid].value[selfid] = objarr[p];
                        }else if(gettype(objarr[pid].value)=='[object Array]'){
                            objarr[pid].value.push(objarr[p]);
                        }else{
                            
                        }
                    }
                }
                console.log(objarr)
                var _final = {};
                for(var p in objarr){
                    if(objarr[p].level == 1){
                        createObj(objarr[p],_final);
                    }
                }
                function createObj(obj,who){
                    var _type = gettype(obj.value);
                    if(_type=='[object Object]'){
                        !who[obj.key] && (who[obj.key] = {});
                        for(var p in obj.value){
                            createObj(obj.value[p],who[obj.key]);
                        }
                    }else if(_type=='[object Array]'){
                        !who[obj.key] && (who[obj.key] = []);
                        for(var i=0,len=obj.value.length;i<len;i++){
                            if(obj.value[i].key!=''){
                                var thisobj = {}; 
                                who[obj.key].push(thisobj);
                                createObj(obj.value[i],thisobj);
                            }else{
                                createObj(obj.value[i],who[obj.key]);
                            }
                        }
                    }else{
                        if(obj.key!=''){
                            who[obj.key] = obj.value;
                        }else{
                            who.push(obj.value);
                        }
                    }
                }
                $('result').innerHTML = JSON.stringify(_final)
                console.log(_final)
                _final = {}
            }
        }
    </script>
</body>
</html>
改进了下。。凑合用。
functionsub 2013-03-28
  • 打赏
  • 举报
回复

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSON生成</title>
    <style>
        .sub{
            margin-left:5px;
        }
        div{position:relative;}
        .sub_child{
            margin-left:20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <a href="javascript:void(0)" class="other" self="first_other" id="first_other" level="1">同</a><a self="first_sub" level="1" href="javascript:void(0)" id="first_sub" class="sub">子</a><input self="first_other" type="text" name="pname" level="1" id="first_pname">:<input self="first_sub" level="1" type="text" name="pvalue" id="first_pvalue"/>
            <div class="sub_child"></div>
        </div>
    </div>
    <input value="显示JSON" type="button" id="show" />
    <div id="result"></div>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        var obj = {},sour = {};
        window.onload = function(){
            var d = document,container = $('container');
            function createAttr(level,who,sub){
                var now = (new Date()).getTime();
                var self = 'name'+now;
                var _parent = level==1 ? container : (!sub ? who.parentNode.parentNode : who.parentNode.getElementsByClassName('sub_child')[0]);
                var frag = d.createDocumentFragment();
                var con = d.createElement('div');
                var othera = d.createElement('a');
                othera.href="javascript:void(0)";
                othera.setAttribute('level',level);
                othera.innerHTML = '同'
                othera.setAttribute('self',self);
                var suba = othera.cloneNode();
                suba.innerHTML = '子';
                suba.className = 'sub';
                var attrName = d.createElement('input');
                attrName.name = 'pname';
                attrName.type = 'text';
                attrName.setAttribute('self',self)
                var attrValue = attrName.cloneNode();
                attrValue.name = 'pvalue';
                attrValue.type = 'text';
                attrName.setAttribute('self','name'+now);
                attrValue.setAttribute('self','name'+now);
                attrName.setAttribute('level',level);
                attrValue.setAttribute('level',level);
                con.appendChild(othera);
                con.appendChild(suba);
                con.appendChild(attrName);
                var split = d.createTextNode(':');
                var subcon = d.createElement('div')
                subcon.className= 'sub_child'
                con.appendChild(split);
                con.appendChild(attrValue);
                var del = othera.cloneNode();
                del.innerHTML = '删';
                con.appendChild(del);
                con.appendChild(subcon);
                frag.appendChild(con);
                if(who){
                    var parentName = sub ? who.getAttribute('self') : who.getAttribute('parent');
                    attrName.setAttribute('parent',parentName);
                    attrValue.setAttribute('parent',parentName);
                    othera.setAttribute('parent',parentName);
                    suba.setAttribute('parent',parentName);
                }
                del.onclick = function(){
                    var parent = this.parentNode;
                    parent.parentNode.removeChild(parent)
                }
                _parent.appendChild(frag);
                othera.onclick = function(){
                    var level = this.getAttribute('level');
                    createAttr(level,this);
                };
                suba.onclick = function(){
                    var level = parseInt(this.getAttribute('level'));
                    var parent = this.parentNode;
                    var valueinput = parent.getElementsByTagName('input')[1];
                    if(valueinput.type!='checkbox'){
                        var tip = d.createTextNode('数组');
                        parent.insertBefore(tip,valueinput);
                        var checkbox = valueinput.cloneNode();
                        checkbox.type = 'checkbox';
                        parent.insertBefore(checkbox,tip);
                        parent.removeChild(valueinput);
                    }
                    createAttr(level + 1,this,true);
                }
            }
            function init(){
                var key1 = $('first_other').getAttribute('self');
                $('first_other').onclick = function(){
                    var level = this.getAttribute('level');
                    createAttr(level,this);
                }
                var now = (new Date()).getTime()
                $('first_other').setAttribute('self','name'+now);
                $('first_sub').setAttribute('self','name'+now);
                $('first_pname').setAttribute('self','name'+now);
                $('first_pvalue').setAttribute('self','name'+now);
                $('first_sub').onclick = function(){
                    var level = parseInt(this.getAttribute('level'));
                    var parent = this.parentNode;
                    var valueinput = parent.getElementsByTagName('input')[1];
                    if(valueinput.type!='checkbox'){
                        var tip = d.createTextNode('数组');
                        parent.insertBefore(tip,valueinput);
                        var checkbox = valueinput.cloneNode();
                        checkbox.type = 'checkbox';
                        parent.insertBefore(checkbox,tip);
                        parent.removeChild(valueinput);
                    }
                    createAttr(level + 1,this,true);
                    var self = this.getAttribute('self');
                    sour[self] = {};
                }
            }
            init();
            function gettype(obj){
                return Object.prototype.toString.call(obj);
            }
            $('show').onclick = function(){
                console.log(sour)
                var nameinputs = document.getElementsByName('pname');
                var valueinputs = document.getElementsByName('pvalue');
                var len = nameinputs.length;
                var ip,vip;
                var arr = [],objarr = {};
                for(var i=0;i<len;i++){
                    ip = nameinputs[i],vip = valueinputs[i];
                    var parent = ip.getAttribute('parent');
                    var _k = ip.value,_v = vip.type=='checkbox' ? (vip.checked ? [] : {}) :vip.value,_id = ip.getAttribute('self');
                    var level = parseInt(ip.getAttribute('level'))
                    objarr[_id] = {
                        id:_id,
                        key:_k,
                        value : _v,
                        p : parent,
                        level : level
                    }
                }
                for(var p in objarr){
                    if(objarr[p].p){
                        var pid = objarr[p].p;
                        var selfid = objarr[p].id;
                        if(gettype(objarr[pid].value)=='[object Object]'){
                            objarr[pid].value[selfid] = objarr[p];
                        }else if(gettype(objarr[pid].value)=='[object Array]'){
                            objarr[pid].value.push(objarr[p]);
                        }else{
                            
                        }
                    }
                }
                var _final = {};
                for(var p in objarr){
                    if(objarr[p].level == 1){
                        createObj(objarr[p],_final);
                    }
                }
                function createObj(obj,who){
                    var _type = gettype(obj.value);
                    if(_type=='[object Object]'){
                        !who[obj.key] && (who[obj.key] = {});
                        for(var p in obj.value){
                            createObj(obj.value[p],who[obj.key]);
                        }
                    }else if(_type=='[object Array]'){
                        !who[obj.key] && (who[obj.key] = []);
                        for(var i=0,len=obj.value.length;i<len;i++){
                            var thisobj = {}; 
                            who[obj.key].push(thisobj);
                            
                            createObj(obj.value[i],thisobj);
                        }
                    }else{
                        who[obj.key] = obj.value;
                    }
                }
                $('result').innerHTML = JSON.stringify(_final)
                console.log(_final)
                _final = {}
            }
        }
    </script>
</body>
</html>
凑合用吧。。 最后拼JSON,拼的累死我了。
functionsub 2013-03-28
  • 打赏
  • 举报
回复

    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
function getElementsByClassName(className, element) {
    var children = (element || document).getElementsByTagName('*');
    var elements = new Array();
 
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
        var classNames = child.className.split(' ');
        for (var j = 0; j < classNames.length; j++) {
            if (classNames[j] == className) {
                elements.push(child);
                break;
            }
        }
    }
 
    return elements;
}
        var obj = {},sour = {};
        window.onload = function(){
            var d = document,container = $('container');
            function createAttr(level,who,sub){
                var now = (new Date()).getTime();
                var self = 'name'+now;
                var _parent = level==1 ? container : (!sub ? who.parentNode.parentNode : getElementsByClassName('sub_child',who.parentNode)[0]);
                var frag = d.createDocumentFragment();
                var con = d.createElement('div');
                var othera = d.createElement('a');
                othera.href="javascript:void(0)";
                othera.setAttribute('level',level);
                othera.innerHTML = '同'
                othera.setAttribute('self',self);
                var suba = othera.cloneNode();
                suba.innerHTML = '子';
                suba.className = 'sub';
                var attrName = d.createElement('input');
                attrName.name = 'pname';
                attrName.type = 'text';
                attrName.setAttribute('self',self)
                var attrValue = attrName.cloneNode();
                attrValue.name = 'pvalue';
                attrValue.type = 'text';
                attrName.setAttribute('self','name'+now);
                attrValue.setAttribute('self','name'+now);
                attrName.setAttribute('level',level);
                attrValue.setAttribute('level',level);
                con.appendChild(othera);
                con.appendChild(suba);
                con.appendChild(attrName);
                var split = d.createTextNode(':');
                var subcon = d.createElement('div')
                subcon.className= 'sub_child'
                con.appendChild(split);
                con.appendChild(attrValue);
                var del = othera.cloneNode();
                del.innerHTML = '删';
                con.appendChild(del);
                con.appendChild(subcon);
                frag.appendChild(con);
                if(who){
                    var parentName = sub ? who.getAttribute('self') : who.getAttribute('parent');
                    attrName.setAttribute('parent',parentName);
                    attrValue.setAttribute('parent',parentName);
                    othera.setAttribute('parent',parentName);
                    suba.setAttribute('parent',parentName);
                }
                del.onclick = function(){
                    var parent = this.parentNode;
                    parent.parentNode.removeChild(parent)
                }
                _parent.appendChild(frag);
                othera.onclick = function(){
                    var level = this.getAttribute('level');
                    createAttr(level,this);
                };
                suba.onclick = function(){
                    var level = parseInt(this.getAttribute('level'));
                    var parent = this.parentNode;
                    var valueinput = parent.getElementsByTagName('input')[1];
                    if(valueinput.type!='checkbox'){
                        var tip = d.createTextNode('数组');
                        parent.insertBefore(tip,valueinput);
                        var checkbox = valueinput.cloneNode();
                        checkbox.type = 'checkbox';
                        parent.insertBefore(checkbox,tip);
                        parent.removeChild(valueinput);
                    }
                    createAttr(level + 1,this,true);
                }
            }
            function init(){
                var key1 = $('first_other').getAttribute('self');
                $('first_other').onclick = function(){
                    var level = this.getAttribute('level');
                    createAttr(level,this);
                }
                var now = (new Date()).getTime()
                $('first_other').setAttribute('self','name'+now);
                $('first_sub').setAttribute('self','name'+now);
                $('first_pname').setAttribute('self','name'+now);
                $('first_pvalue').setAttribute('self','name'+now);
                $('first_sub').onclick = function(){
                    var level = parseInt(this.getAttribute('level'));
                    var parent = this.parentNode;
                    var valueinput = parent.getElementsByTagName('input')[1];
                    if(valueinput.type!='checkbox'){
                        var tip = d.createTextNode('数组');
                        parent.insertBefore(tip,valueinput);
                        var checkbox = valueinput.cloneNode();
                        checkbox.type = 'checkbox';
                        parent.insertBefore(checkbox,tip);
                        parent.removeChild(valueinput);
                    }
                    createAttr(level + 1,this,true);
                    var self = this.getAttribute('self');
                    sour[self] = {};
                }
            }
            init();
            function gettype(obj){
                return Object.prototype.toString.call(obj);
            }
            $('show').onclick = function(){
                console.log(sour)
                var nameinputs = document.getElementsByName('pname');
                var valueinputs = document.getElementsByName('pvalue');
                var len = nameinputs.length;
                var ip,vip;
                var arr = [],objarr = {};
                for(var i=0;i<len;i++){
                    ip = nameinputs[i],vip = valueinputs[i];
                    var parent = ip.getAttribute('parent');
                    parent = (parent==null || parent==undefined || parent=='null') ? '' : parent;
                    console.log(parent)
                    var _k = ip.value,_v = vip.type=='checkbox' ? (vip.checked ? [] : {}) :vip.value,_id = ip.getAttribute('self');
                    var level = parseInt(ip.getAttribute('level'))
                    objarr[_id] = {
                        id:_id,
                        key:_k,
                        value : _v,
                        p : parent,
                        level : level
                    }
                }
                for(var p in objarr){
                    if(objarr[p].p){
                        var pid = objarr[p].p;
                        var selfid = objarr[p].id;
                        if(gettype(objarr[pid].value)=='[object Object]'){
                            objarr[pid].value[selfid] = objarr[p];
                        }else if(gettype(objarr[pid].value)=='[object Array]'){
                            objarr[pid].value.push(objarr[p]);
                        }else{
                            
                        }
                    }
                }
                console.log(objarr)
                var _final = {};
                for(var p in objarr){
                    if(objarr[p].level == 1){
                        createObj(objarr[p],_final);
                    }
                }
                function createObj(obj,who){
                    var _type = gettype(obj.value);
                    if(_type=='[object Object]'){
                        !who[obj.key] && (who[obj.key] = {});
                        for(var p in obj.value){
                            createObj(obj.value[p],who[obj.key]);
                        }
                    }else if(_type=='[object Array]'){
                        if(obj.key!=''){
                            !who[obj.key] && (who[obj.key] = []);
                        }else{
                            if(gettype(who)=='[object Array]'||gettype(who)=='[object Object]'){
                                alert('有子字段且子字段为数组的字段名不得为空!');
                                return;
                            }
                        }
                        for(var i=0,len=obj.value.length;i<len;i++){
                            if(obj.key==''){
                                createObj(obj.value[i],who[who.length-1]);
                            }else{
                                if(obj.value[i].key!=''){
                                    var thisobj = {}; 
                                    who[obj.key].push(thisobj);
                                    createObj(obj.value[i],thisobj);
                                }else{
                                    createObj(obj.value[i],who[obj.key]);
                                }
                            }
                        }
                    }else{
                        if(obj.key!=''){
                            if(gettype(who) == '[object Array]'){
                                var thisobj = {};
                                thisobj[obj.key] = obj.value;
                                who.push(thisobj)
                            }else{
                                who[obj.key] = obj.value;
                            }
                        }else{
                            obj.value!= '' && who.push(obj.value);
                        }
                    }
                }
                $('result').innerHTML = JSON.stringify(_final)
                console.log(_final)
                _final = {}
            }
        }
    </script>
又改了点,主要是兼容性的调整。替换原来的JS,不去掉HTML代码太长了发不了。
cy6655 2013-03-27
  • 打赏
  • 举报
回复
引用 1 楼 ftiger 的回复:
json有java的实现包,直接引用就好了。
最主要的还是jsp里 js的代码 因为层数的不确定性 造成不知道该去对应的key和value值。
cy6655 2013-03-27
  • 打赏
  • 举报
回复
最主要的还是jsp里 js的代码 因为层数的不确定性 造成不知道该去对应的key和value值。
gr1532879 2013-03-27
  • 打赏
  • 举报
回复
jsp 实现生成json串? 没理解具体什么意思,是否是前台维护类似于树状结构,然后将js对象转为json? 如果只是js对象转json的话 可以使用jquery。 如果是维护树状结构js有问题的话说明具体问题
cy6655 2013-03-27
  • 打赏
  • 举报
回复
引用 6 楼 zzgzzg00 的回复:
json字符串转js对象可以直接用eval 虽然不怎么推荐
js对象转json字符串可以递归遍历这个对象自己拼接字符串试试

不是很明白你的意思

我的意思就是形如这种图片,就是用户输出参数名称 和参数值 形成一个树状的结构 然后根据这个树状的结构生成一个json串
cy6655 2013-03-27
  • 打赏
  • 举报
回复
引用 16 楼 kocokolo 的回复:
window.onload 为啥不用jquery ready. 你还是列要实现的功能吧, 帮你转变一下思路,说不定会好些。
要实现的功能 就是用户输出参数名称 和参数值 形成一个树状的结构 然后根据这个树状的结构生成一个json串
kocokolo 2013-03-27
  • 打赏
  • 举报
回复
window.onload 为啥不用jquery ready. 你还是列要实现的功能吧, 帮你转变一下思路,说不定会好些。
似梦飞花 2013-03-27
  • 打赏
  • 举报
回复
json字符串转js对象可以直接用eval 虽然不怎么推荐 js对象转json字符串可以递归遍历这个对象自己拼接字符串试试 不是很明白你的意思
cy6655 2013-03-27
  • 打赏
  • 举报
回复
引用 11 楼 cy6655 的回复:
[quote=引用 10 楼 functionsub 的回复:]
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSON生成</title>
</head>
<body>
    <div>UserId:<input type="text" id="UserId" /></div>
    <div>Password:<input type="password" id="Password" /></div>
    <div>trademark:<input type="text" id="trademark" /></div>
    <div>OfferInfoList:
        Id:<input type="text" id="Id" />
        Name:<input type="text" id="Name" />
        region:<input type="text" id="region" />
        <input type="button" id="addOfferInfoList" value="添加OfferInfo">
        <div id="offerInfoTip"></div>
    </div>
    <input value="显示JSON" type="button" id="show" />
    <div id="result"></div>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        var obj = {UserId:'',Password:'',trademark:'',OfferInfoList:[]};
        window.onload = function(){
            $('show').onclick = function(){
                var UserId = $('UserId').value;
                var Password = $('Password').value;
                var trademark = $('trademark').value;
                obj.UserId = UserId;
                obj.Password = Password;
                obj.trademark = trademark;
                $('result').innerHTML = JSON.stringify(obj);
            }
            $('addOfferInfoList').onclick = function(){
                var Id = $('Id').value;
                var Name = $('Name').value;
                var region = $('region').value;
                var offerInfo = {
                    Id:Id,
                    Name:Name,
                    region:region
                }
                obj.OfferInfoList.push(offerInfo);
                $('Id').value = '';
                $('Name').value = '';
                $('region').value = '';
                $('offerInfoTip').innerHTML = '已添加'+obj.OfferInfoList.length+'条offerinfo';
            }
        }
    </script>
</body>
</html>
这样?
对 就是类似这样的 但是参数的名称也都是用户自己定义的 层数也是用户自己定义的 麻烦给点详细的吧 谢谢大神了![/quote] 就是这样的 帮忙解决下吧!
暗淡亮点 2013-03-27
  • 打赏
  • 举报
回复
自己写的,可以看看 http://suleil1.blog.163.com/blog/static/4501288220121094316138/
cy6655 2013-03-27
  • 打赏
  • 举报
回复
引用 6 楼 zzgzzg00 的回复:
json字符串转js对象可以直接用eval 虽然不怎么推荐 js对象转json字符串可以递归遍历这个对象自己拼接字符串试试 不是很明白你的意思
加你QQ吧 这样好请教你。
cy6655 2013-03-27
  • 打赏
  • 举报
回复
引用 9 楼 gr1532879 的回复:
[quote=引用 8 楼 cy6655 的回复:] [quote=引用 6 楼 zzgzzg00 的回复:] json字符串转js对象可以直接用eval 虽然不怎么推荐 js对象转json字符串可以递归遍历这个对象自己拼接字符串试试 不是很明白你的意思
就是 我前台jsp要实现用户输入 参数值 和 参数名称,通过遍历用户输入的,然后生辰json串。 jsp类似:[/quote] 不急的话晚上回家给你做个例子,看看是不是你要的[/quote] 好 谢谢你!麻烦了 弄了两天了 还是没有头绪。
cy6655 2013-03-27
  • 打赏
  • 举报
回复
引用 10 楼 functionsub 的回复:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSON生成</title>
</head>
<body>
    <div>UserId:<input type="text" id="UserId" /></div>
    <div>Password:<input type="password" id="Password" /></div>
    <div>trademark:<input type="text" id="trademark" /></div>
    <div>OfferInfoList:
        Id:<input type="text" id="Id" />
        Name:<input type="text" id="Name" />
        region:<input type="text" id="region" />
        <input type="button" id="addOfferInfoList" value="添加OfferInfo">
        <div id="offerInfoTip"></div>
    </div>
    <input value="显示JSON" type="button" id="show" />
    <div id="result"></div>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        var obj = {UserId:'',Password:'',trademark:'',OfferInfoList:[]};
        window.onload = function(){
            $('show').onclick = function(){
                var UserId = $('UserId').value;
                var Password = $('Password').value;
                var trademark = $('trademark').value;
                obj.UserId = UserId;
                obj.Password = Password;
                obj.trademark = trademark;
                $('result').innerHTML = JSON.stringify(obj);
            }
            $('addOfferInfoList').onclick = function(){
                var Id = $('Id').value;
                var Name = $('Name').value;
                var region = $('region').value;
                var offerInfo = {
                    Id:Id,
                    Name:Name,
                    region:region
                }
                obj.OfferInfoList.push(offerInfo);
                $('Id').value = '';
                $('Name').value = '';
                $('region').value = '';
                $('offerInfoTip').innerHTML = '已添加'+obj.OfferInfoList.length+'条offerinfo';
            }
        }
    </script>
</body>
</html>
这样?
对 就是类似这样的 但是参数的名称也都是用户自己定义的 层数也是用户自己定义的 麻烦给点详细的吧 谢谢大神了!
functionsub 2013-03-27
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JSON生成</title>
</head>
<body>
    <div>UserId:<input type="text" id="UserId" /></div>
    <div>Password:<input type="password" id="Password" /></div>
    <div>trademark:<input type="text" id="trademark" /></div>
    <div>OfferInfoList:
        Id:<input type="text" id="Id" />
        Name:<input type="text" id="Name" />
        region:<input type="text" id="region" />
        <input type="button" id="addOfferInfoList" value="添加OfferInfo">
        <div id="offerInfoTip"></div>
    </div>
    <input value="显示JSON" type="button" id="show" />
    <div id="result"></div>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        var obj = {UserId:'',Password:'',trademark:'',OfferInfoList:[]};
        window.onload = function(){
            $('show').onclick = function(){
                var UserId = $('UserId').value;
                var Password = $('Password').value;
                var trademark = $('trademark').value;
                obj.UserId = UserId;
                obj.Password = Password;
                obj.trademark = trademark;
                $('result').innerHTML = JSON.stringify(obj);
            }
            $('addOfferInfoList').onclick = function(){
                var Id = $('Id').value;
                var Name = $('Name').value;
                var region = $('region').value;
                var offerInfo = {
                    Id:Id,
                    Name:Name,
                    region:region
                }
                obj.OfferInfoList.push(offerInfo);
                $('Id').value = '';
                $('Name').value = '';
                $('region').value = '';
                $('offerInfoTip').innerHTML = '已添加'+obj.OfferInfoList.length+'条offerinfo';
            }
        }
    </script>
</body>
</html>
这样?
加载更多回复(5)

87,992

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧