ObjTree.js是一款json与xml格式互转插件

ObjTree.js是一款json与xml格式互转插件

ObjTree.js是一款json与xml格式互转插件,可以将xml格式的文档转成json格式,并且还可以将json格式的文档转成xml格式。

使用方式:

第一步引入ObjTree.js

第二步方法参数
var xotree = new XML.ObjTree();//实例化

xotree.parseXML(xml_str)将xml文档解析为json

xotree.writeXML(json_obj)将json文档输出为xml

完整代码:

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


</head>

<body>




    <div class='container'>


        <div>
            <button onclick="javascript:demo_xml();">示例XML</button>
            <button onclick="javascript:demo_json();">示例JSON</button>
        </div>
        <textarea placeholder="贴入要转换的JSON或者XML代码" id="input" style="height:200px;width:100%;"></textarea>
        <div>
            <button onclick="javascript:xml_2_json();">XML转JSON</button>
            <button onclick="javascript:json_2_xml();">JSON转XML</button>
            <input type="checkbox" id="pretty_json" checked="">PRETTY JSON
            <textarea placeholder="转换之后的XML或者JSON代码" id="output" style="height:200px;width:100%;"></textarea>
            <div>
                <div><span id="message" class="green"></span></div>
            </div>
            <div class='row'>
                <button type="button" onclick="save_file();">保存文本</button>
                <button type="button" onclick="Empty();">清空结果</button>
            </div>
            <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
            <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ObjTree.js"></script>
            <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/filesaver.js"></script>
            <script type="text/javascript">
                var outtype="";
                            			function demo_xml() {
var xml = "<books>\
<book>\
<author>Auther1</author>\
<title>Book1</title>\
</book>\
<book>\
<author>Auther2</author>\
<title>Book2</title>\
 </book>\
 </books>";
$('#input').val(xml);
                            			}
                            			function demo_json() {
                            				var json = '{\
                            	"tools": [\
                            	{ "name":"css format" , "site":"https://tool.bfw.wiki/tool/1559286383549195.html" },\
                            	{ "name":"json format" , "site":"https://tool.bfw.wiki/tool/1559557892293068.html" }\
                            	]\
                            	}';
                            				$('#input').val(json);
                            			}
                            			function showmsg(type, msg) {
                            				$('#message').removeClass("green").removeClass("red").addClass(type).text(msg);
                            			}
                            			
                            			function xml_2_json() {
                            				var space = ($("#pretty_json").is(':checked')) ? "  " : "";
                            
                            				var xotree = new XML.ObjTree();
                            				var inputdata = $.trim($('#input').val());
                            			    var tree = xotree.parseXML(inputdata);
                            			    if (!tree.html) {
                            					$('#output').val(JSON.stringify(tree, null, space));
                            					showmsg('green', 'XML转JSON成功');
                            					return outtype="json";
                            				} else {
                            					showmsg('red', 'XML格式错误');
                            				}
                            			}
                            			function json_2_xml() {
                            				try {
                            					var xotree = new XML.ObjTree();
                            					var inputdata = $.trim($('#input').val());
                            					$('#output').val(xotree.writeXML(JSON.parse(inputdata)));
                            					showmsg('green', 'JSON转XML成功');
                            					return outtype="xml";
                            				} catch (e) {
                            					showmsg('red', 'JSON格式错误')
                            				}
                            			}
                            			function save_file() {
                            				var saveval=document.getElementById('output').value;
                            				if(saveval==""){
                            					alert("待保存的代码不能为空");
                            					return;
                            				}else{
                            					var blob = new Blob([saveval], {type: "text/plain;charset=utf-8"});
                            					if(outtype=="json") saveAs(blob, "out_code.json");
                            					if(outtype=="xml") saveAs(blob, "jb51_out_code.xml");
                            				}
                            			}
                            			 function Empty() {
                            				document.getElementById('input').value = '';
                            				document.getElementById('output').value = '';
                            				document.getElementById('input').select();
                            			}
            </script>
            <div class='divider'></div>

        </div>
    </div>



</body>

</html>


立即下载ObjTree.js查看所有js插件

网友评论0

程序员在线工具箱