<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js实现xml转json和json转xml</title>

    <style type="text/css">

        html,body{width:%;height:%;margin:;}

    </style>

</head>

<body>

      <textarea id="xml" style="width:45%;height:700px;"></textarea>

      <textarea id="json" style="width:45%;height:700px;"></textarea>

      <button id="tojson">xml转json</button>

      <button id="toxml">json转xml</button>

</body>

</html>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script type="text/javascript" src="http://www.jsons.cn/Down/jquery.json2xml.js"></script>

<script type="text/javascript" src="http://www.jsons.cn/Down/jquery.xml2json.js"></script>

<script type="text/javascript">

//参考链接：http://www.jsons.cn/articleinfo/8/

 $(function(){

  $("#tojson").click(function(){

    var str=$("#xml").val();

    var json_obj = $.xml2json(str);

    console.log(json_obj);

    $("#json").val(JSON.stringify(json_obj));

  });

  $("#toxml").click(function(){

    var str=$("#json").val();

    str=JSON.parse(str);

    var xml_content = $.json2xml(str);

    console.log(xml_content);

    $("#xml").val(xml_content);

  });

 });

</script>

JsonToHtml的更多相关文章

  1. js生成有缩进的表格

    项目中用到用了两天时间想到的,记录下来,如有更好的方法,留言给我,谢谢! js做如下表格: json [{"id":302,"serviceId":15,&qu ...

  2. webview与JS的交互

    webview与JS的交互 一:hybird app, web app 和 native app 的区别   Web App Hybird App 混合Native App 开发成本 低 中 高 维护 ...

  3. 【JS】jquery展示JSON插件JSONView

    JSONView介绍 jQuery插件,用于显示漂亮的JSON. 官网地址:https://plugins.jquery.com/jsonview/ git地址:https://github.com/ ...

随机推荐

  1. wireshark怎么抓包、wireshark抓包详细图文教程(转)

    wireshark怎么抓包.wireshark抓包详细图文教程 wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息.使用wireshark的人必 ...

  2. Spring使用标签注解来简化xml书写

    一.步骤 在配置文件中,引入context命名空间 <beans xmlns="http://www.springframework.org/schema/beans" xm ...

  3. 717. 1-bit and 2-bit Characters最后一位数是否为0

    ［抄题］: We have two special characters. The first character can be represented by one bit 0. The secon ...

  4. 基于Nginx实现集群原理

    1)安装Nginx 2)配置多个Tomcat,并修改端口号(两个端口号不一样即可) 3)在Nginx的Nginx.conf添加如下配置:

  5. 关于mysql自增字段问题

    最近遇到mysql字段的自增问题,需要临时处理一下,然后就顺便补补课,这样就有了这样一篇文章. 1.自增值是什么 他是一个字段属性,是用来创建唯一标识的列的 The AUTO_INCREMENT at ...

  6. 3.SELECT 语句

    SELECT 语句用于从表中选取数据. 结果被存储在一个结果表中(称为结果集). SQL SELECT 语法 SELECT 列名称 FROM 表名称 以及: SELECT * FROM 表名称 注释: ...

  7. 黑盒测试实践--Day7 12.1

    黑盒测试实践--Day7 12.1 今天完成任务情况: 录制小组作业中的自动化测试工具实践视频 汇总大家提交的各种作业模块,打包完成小组共同作业 小组成员完成个人情况说明后在截止时间前分别提交作业 小 ...

  8. Python基础入门-IF语句

    今天给大家分享一下Python中的IF语句的使用场景以及注意事项.主要内容如下: 1.python中的真假 2.Python操作符 3.if语句实例和嵌套实例 4.if语句中的if嵌套实例 5.and ...

  9. CMake使用技巧

    前面有提到使用CMake.很多朋友提到也用过一下,没感觉它有什么好用,不知道怎么用之类. 我必要来说明一下. CMake的语法比较差,不是很优美,不是它不能用一个更好的语法,而是有一个关键优势:简单. ...

  10. Hackfive 使用TextSwitcher和ImageSwitcher实现平滑过渡

    1. 应用场景: 通过向左和向右的导航按钮浏览日期列表 在日期选择空间中改变日期 倒计时始终 新闻刚要 2.用到的知识点是:     TextSwitcher和ImageSwitcher     Te ...