<!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. Sequence（尺取）

    A sequence of N positive integers (10 < N < 100 000), each of them less than or equal 10000, a ...

  2. 【284】◀▶ arcpy.da & arcpy 数据访问模块

    使用游标访问数据 数据访问模块 (arcpy.da) 参考: ArcGIS Python编程案例(9)-ArcPy数据访问模块 读取几何 写入几何 使用 Python 指定查询 01   da.Sea ...

  3. java基础篇之HashMap

    HashMap和C#中的Dictionary基本一样 键是唯一值 值可以是对象 循环HashMap的方式:一: 1,通过Set<T> st = hs.keySet()找到所有的key值集合 ...

  4. 用rand5()生成rand(n)

    问题:有函数rand5(),它能够等概率生成[0,5)之间的整数.由rand5()构造rand(n)使其能够等概率生成[0,n)之间的整数. 思路1:有rand5()先生成等概率生成0和1的rand0 ...

  5. 安装gdb insight(6.8.1)

    如果之前安装过6.8或其它版本,请先删除以下目录 rm -rf /usr/local/insight rm -rf /usr/share/tcltk 如果之前设置过环境变量,也请删除 unset TC ...

  6. Mask_RCNN caffe2

    cd DETECTRON/detectron/ python2 tools/infer_simple_ip_camera.py \    --cfg configs/12_2017_baselines ...

  7. Spring中使用Velocity模板

    使用Velocity模板 Velocity是一种针对Java应用的易用的模板语言.Velocity模板中没有任何 Java代码,这使得它能够同时被非开发人员和开发人员轻松地理解.Velocity的用户 ...

  8. 258. Add Digits 数位相加到只剩一位数

    ［抄题］: Given a non-negative integer num, repeatedly add all its digits until the result has only one ...

  9. 2014年Linux 和开源技术回顾盘点

    ZDNet科技观察家StevenJ.Vaughan-Nichols在年终发表了对Linux和开源技术这一年跌宕起伏的总结,细数这一年中的惊喜和不堪. 2014Linux之殇 “心脏出血(Heartbl ...

  10. Visual Studio OpenCV 开发环境配置

    因为VS配置OpenCV好多新手都很难一次配置成功,而且OpenCV库每新建一个项目都要配置很是麻烦,所以今天就给大家介绍一个“一劳永逸”的方法. 注:理论上只要VS和OpenCV是版本兼容的,该方法 ...