<!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. bash&nbsp;shell笔记2&nbsp;结构化命令

    二.使用结构化命令 知识内容: # 改变命令流 # 使用if-then逻辑 # 嵌套if-then # 测试条件 # 高级if-then功能 许多程序在脚本命令之间需要某些逻辑控制流,有些命令允许脚本 ...

  2. IP地址分类和子网划分

    IP地址: 地址范围                                  网络地址规律 子网掩码             私有地址       保留地址 A类地址:从1.0.0.0 到1 ...

  3. sqlplus客户端出现乱码

    查询oracle server端的字符集 select userenv('language') from dual; 修改客户端 cmd是gbk编码 环境变量 NLS_LANG 值:SIMPLIFIE ...

  4. 设置html页面不被浏览器缓存

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" ...

  5. 图的第k短路

    [问题描述] 给你一个有向图,求从1到n的第k短路. [解法] SPFA+A*搜索. 1 A*算法 A*算法在人工智能中是一种典型的启发式搜索算法,启发中的估价是用估价函数表示的: h(n)=f(n) ...

  6. SpringBoot27 JDK动态代理详解、获取指定的类类型、动态注册Bean、接口调用框架

    1 JDK动态代理详解 静态代理.JDK动态代理.Cglib动态代理的简单实现方式和区别请参见我的另外一篇博文. 1.1 JDK代理的基本步骤 >通过实现InvocationHandler接口来 ...

  7. Java 基于web service 暴露接口 供外部调用

    package cn.zr.out.outinterface; import java.text.SimpleDateFormat; import java.util.Date; import jav ...

  8. 基于 EntityFramework 的数据库主从读写分离架构（1） - 原理概述和基本功能实现

        回到目录,完整代码请查看(https://github.com/cjw0511/NDF.Infrastructure)中的目录:      src\ NDF.Data.EntityFramew ...

  9. c# 获取非托管指针长度

    public List<string> GetPDFValues() { List<string> strs = new List<string>(); unsaf ...

  10. 十四课 slam&gmapping

    gmapping 根据激光数据(或者深度数据模拟的激光数据)建立地图,在turtlebot里面应用的就是深度数据模拟的激光数据.如果没有激光雷达的话可以使用Kinect. SLAM 机器人在未知环境中 ...