JS实现xml和json(也可看做对象)互转

zrc199021

6731人浏览 · 2016-07-14 23:02:41

zrc199021 · 2016-07-14 23:02:41 发布

最近有个前端的需求: 解析后台xml, 并添加删除和修改, 然后传给后台, 思来想去, 最简单的办法就是利用xml和对象互转, 即从后台读取xml传到前台并形成表格(已有代码,或者用对象生成表格), 前台可编辑表格(包括添加,删除),提交时将表格数据存入对象中, 转为json, 再转为xml,最后以字符串形式传给后台写入文件.

逻辑图:

代码:

<!-- 思路:xml转成表格,操作表格,然后再将表格内容收进对象里,对象转为json再转xml传给后台 -->

<html>
<body>

<script type="text/javascript">
var xml = "<root><first>123</first><second><error>Nothing</error><haha>Something</haha></second></root>";
var parseXMLJSON = {
    parse2json: function(xmlStr){
        var root = document.createElement('XMLROOT');
        root.innerHTML = xmlStr;
        return this.parse(root);
    } ,
    parse: function(node){
        var result = {};
        for(var i = 0 ; i < node.childNodes.length ; ++i){
            if(node.childNodes[i].nodeType==1){
                result[node.childNodes[i].nodeName.toLowerCase()] = this.parse(node.childNodes[i]);
            }else if(node.childNodes[i].nodeType==3){
                return node.childNodes[i].nodeValue;
            }
        }
        return result;
    } ,
    parse2xml: function(data){
        var xmldata = '';
        for(var i in data){
            xmldata+= '<'+i+'>';
            if(typeof data[i]=='object'){
                xmldata+= this.parse2xml(data[i]);
            }else{
                xmldata+= data[i];
            }
            xmldata+= '</'+i+'>';
        }
        return xmldata;
    }
};
var jsonData = parseXMLJSON.parse2json(xml);
var xmlData = parseXMLJSON.parse2xml(jsonData);
alert('xml to json: ' + JSON.stringify(jsonData));
alert('json to xml: ' + xmlData);
</script>

</body>
</html>