jsp实现txt文件导入，显示json的需求

无法直接读取和直接保存文件到客户端你需要用服务器做中介，负责读取文件内容输出客户端，保存的时候提交输入框中的内容给服务器，服务器设置content-disposition为attachment;filename="xxx.txt"，然后输出提交的内容，就可以弹出保存文件对话框了要点就是将表单提交到隐藏的iframe中实现无刷新上传文件java不知道怎么设置响应头，下面是C#的Response.ContentType = "text/plain";
Response.AddHeader("Content-Disposition", "attachment;filename=\"xxx.txt\"");
Response.Write(Request.Form["txt"]);//输出提交的内容
Response.End();HTML模型
<script>
    function readContent(ifr) {
        document.getElementById('txt').value = ifr.contentWindow.document.body.innerHTML;
    }
</script>
<iframe name="readifr" onload="readContent(this)" style="display:none"></iframe>

<form target="readifr" method="post" action="xxxread.jsp" enctype="multipart/form-data">
选择文件：<input type="file" name="fntxt" onchange="this.form.submit()"/>
</form>
<iframe name="saveifr" style="display:none"></iframe>
<form target="ifr" method="post" action="xxxsave.jsp">
<textarea rows="5" cols="50" name="txt" id="txt"></textarea><input type="submit" value="保存" />
</form>

按按钮后用io流读txt文件
把读出的json部分在js里转换成js对象
之后操作这个对象的属性后转回json再用io流写入txt试试

首先要确定一点，这个“本地”是服务器，还是客户端。如果是在服务器上，可以考虑直接读流打开，反到前台，修改完之后写回去。如果是在客户端，可以将文件上传，在Servlet中返回页面编辑，编辑完成之后提供下载。这样可以实现这个功能。（我不知道JSP可不可以直接编辑客户端的文件。。）

。。好麻烦。。前几天给你写了生成JSON的，照你这么说，还得写一个解析JSON再生成DOM节点的。。

大神真的是这样啊我这导师还要让我把写的那个txt文件然后给读出来然后展示出来让用户修改改了再存到项目下面我都疯了！！！啊！！！

大神能帮忙给个思路不？谢谢！我能不能先在java部分吧json转成map，然后传到jsp然后再怎么显示呢？

好麻烦。。麻烦的不想去弄。。又得解析JSON结构。。我了个去。不过有个简单点的方法，就是你在后台不要给JSON，给的是一个数组，一个元素对应的是一行，
有键位名，键位值，键位的level，键位的父节点。[
{id:1,parent:0,key:'user',value:''},
{id:2,parent:1,key:'name',value:'test'},
{id:3,parent:1,key:'age',value:'18'},
{id:4,parent:1,key:'dress',value:[]},
{id:5,parent:4,key:'Tshirt',value:'aa'},
{id:6,parent:4,key:'shoe',value:'bb'},
]
以上的数组可以解析成
{
    "user" : {
        "name": "test",
        "age" : '18',
        "dress" : [
            {"Tshirt" : "aa"},
            {"shoe" : "bb"},
        ]
    }
}不知道你理解没。
不知道你明白不

你是说在后台就通过json串组装这个数组，然后传到jsp解析吗？

我之前的jsp已经完成了动态生成json串的步骤现在就是读取这个json串以后怎么样在页面显示让用户修改。

代码太长，分开来发。<!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" />
    <input value="读取JSON" type="button" id="read" />
    <div id="result"></div>
    <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 jsonToKV(json){
                var jsonObj = {};
                function cutJson(json,key,par,level){
                    var name;
                    while(jsonObj[name]){
                        name = 'name'+(new Date()).getTime();
                    }
                    level = level || 0;
                    jsonObj[name] = {};
                    jsonObj[name].value = json;
                    jsonObj[name].key = key;
                    jsonObj[name].level = level;
                    par && (jsonObj[name].parent = par);
                    if(gettype(json)=='[object Object]'){
                        level++
                        for(var p in json){
                            cutJson(json[p],p,name,level);
                        }
                    }else if(gettype(json)=='[object Array]'){
                        level++
                        for(var i=0,len=json.length;i<len;i++){
                            cutJson(json[i],i,name,level);
                        }
                    }
                }
                cutJson(json);
                for(var p in jsonObj){
                    if(p!=='undefined')
                    createDomTree(p,jsonObj[p]);
                }
                return jsonObj;
            }

            function createDomTree(id,obj){
                var parentDom = obj.parent ? getElementsByClassName('sub_child',$(obj.parent))[0] : $('container');
                var frag = d.createDocumentFragment();
                var div = d.createElement('div');
                div.id = id;
                var othera = d.createElement('a');
                othera.href="javascript:void(0)";
                othera.setAttribute('level',obj.level);
                othera.innerHTML = '同'
                othera.setAttribute('self',id);
                obj.parent && othera.setAttribute('parent',obj.parent);
                var suba = othera.cloneNode();
                suba.innerHTML = '子';
                suba.className = 'sub';
                var attrName = d.createElement('input');
                attrName.name = 'pname';
                attrName.type = 'text';
                attrName.setAttribute('self',id);
                attrName.value = (typeof obj.key != 'number') ? obj.key : '';
                attrName.setAttribute('level',obj.level);
                obj.parent && attrName.setAttribute('parent',obj.parent);
                var split = d.createTextNode(':');
                var attrValue = attrName.cloneNode();
                attrValue.name = 'pvalue';
                attrValue.setAttribute('level',obj.level);
                if(gettype(obj.value)=='[object Object]'){
                    attrValue.type = 'checkbox'
                    attrValue.checked= false;
                }else if(gettype(obj.value)=='[object Array]'){
                    attrValue.type = 'checkbox';
                    attrValue.checked= true;
                }else{
                    attrValue.value = obj.value;
                }

                var subcon = d.createElement('div')
                subcon.className= 'sub_child'

                var del = othera.cloneNode();
                del.innerHTML = '删';

                div.appendChild(othera);
                div.appendChild(suba);
                div.appendChild(attrName);
                div.appendChild(split);
                div.appendChild(attrValue);
                div.appendChild(del);
                div.appendChild(subcon);

                frag.appendChild(div);
                parentDom.appendChild(frag);
            }

            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);
                }
            }

哦，读取JSON后生成的同跟子没有添加事件。
把createDomTree函数改成一下内容即可
            function createDomTree(id,obj){
                var parentDom = obj.parent ? getElementsByClassName('sub_child',$(obj.parent))[0] : $('container');
                var frag = d.createDocumentFragment();
                var div = d.createElement('div');
                div.id = id;
                var othera = d.createElement('a');
                othera.href="javascript:void(0)";
                othera.setAttribute('level',obj.level);
                othera.innerHTML = '同'
                othera.setAttribute('self',id);
                obj.parent && othera.setAttribute('parent',obj.parent);
                var suba = othera.cloneNode();
                suba.innerHTML = '子';
                suba.className = 'sub';
                var attrName = d.createElement('input');
                attrName.name = 'pname';
                attrName.type = 'text';
                attrName.setAttribute('self',id);
                attrName.value = (typeof obj.key != 'number') ? obj.key : '';
                attrName.setAttribute('level',obj.level);
                obj.parent && attrName.setAttribute('parent',obj.parent);
                var split = d.createTextNode(':');
                var attrValue = attrName.cloneNode();
                attrValue.name = 'pvalue';
                attrValue.setAttribute('level',obj.level);
                if(gettype(obj.value)=='[object Object]'){
                    attrValue.type = 'checkbox'
                    attrValue.checked= false;
                }else if(gettype(obj.value)=='[object Array]'){
                    attrValue.type = 'checkbox';
                    attrValue.checked= true;
                }else{
                    attrValue.value = obj.value;
                }

                var subcon = d.createElement('div')
                subcon.className= 'sub_child'

                var del = othera.cloneNode();
                del.innerHTML = '删';

                div.appendChild(othera);
                div.appendChild(suba);
                div.appendChild(attrName);
                div.appendChild(split);
                div.appendChild(attrValue);
                div.appendChild(del);
                div.appendChild(subcon);

                frag.appendChild(div);
                parentDom.appendChild(frag);
                del.onclick = function(){
                    var parent = this.parentNode;
                    parent.parentNode.removeChild(parent)
                }
                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);
                }
            }

调试易

jsp实现txt文件导入，显示json的需求

解决方案 »