HTML5中使用json对象的实例代码


Posted in HTML / CSS onSeptember 10, 2018

下面通过实例代码给大家介绍HTML5中使用json对象的方法,具体代码如下所示:

<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
     <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
     <title>json对象用法</title>
     <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css" />
     <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js"></script>
    </head>
    <body>
        <div  class="prism-player" id="J_prismPlayer" style="position: absolute"></div>
        <script>
        var students = {
          xiaomin: {
            name: "xiaoming",
            grade: 1
          },
          teemo: {
            name: "teemo",
            grade: 3
          }
        }
        students = JSON.stringify(students); //将JSON转为字符串存到变量里
        console.log(students);
        localStorage.setItem("students",students);//将变量存到localStorage里
        var newStudents = localStorage.getItem("students");
        newStudents = JSON.parse(students); //转为JSON
        console.log(newStudents); // 打印出原先对象
    //  alert(newStudents.length);
        alert(newStudents.xiaomin.name);
         //json数组类型字符串取值
        var jsonStr = '[{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"011","open":false,"pId":"01","name":"A部门"},{"id":"03","open":false,"pId":"0","name":"A部门"},{"id":"04","open":false,"pId":"0","name":"A部门"}, {"id":"05","open":false,"pId":"0","name":"A部门"}, {"id":"06","open":false,"pId":"0","name":"A部门"}]';
        var jsonObj =  JSON.parse(jsonStr);//转换为json对象
        for(var i=0;i<jsonObj.length;i++){
                alert(jsonObj[i].id);  //取json中的值
        }
        console.log(jsonObj)
        var jsonStr1 = JSON.stringify(jsonObj)
        console.log(jsonStr1+"jsonStr1")
        </script>
    </body>
</html>

补充:下面看下Html5中JSON对象与String的互相转换

面对现在移动端的迅速发展,提供数据的方式不在是以前的PC-->PC界面了,这促使了JSON格式的使用,在H5以前的JS中,我在前面的一个H4中JS对JSON中的处理提到了eval方法,eval()   ,在H5中JSON与String的转换如下:

            String转换为JSON对象:                       

var jsonObj;
                            function myParse(){
                          var jsonStr=document.querySelector("#txtJsonStr").value;
                            jsonObj=JSON.parse(jsonStr);
                            }

          JSON对象转换为String:                   

function myStringify(){
                          var txtJson=document.querySelector("#txtJsonStr");
                           var jsonStr2=JSON.stringify(jsonObj); //此处的jsonObj 是一个 JSON对象
                                   txtJson.value=jsonStr2;
                           }

总结

以上所述是小编给大家介绍的HTML5中使用json对象的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 #HTML / CSS
用canvas画心电图的示例代码
Sep 10 #HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 #HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 #HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 #HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 #HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 #HTML / CSS
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
php写的简易聊天室代码
2011/06/04 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python获取标准北京时间的方法
2015/03/24 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python操作文件的参数整理
2019/06/11 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
安卓程序员求职信
2014/02/28 职场文书
中介业务员岗位职责
2014/04/09 职场文书
学期评语大全
2014/04/30 职场文书
爱之链教学反思
2014/04/30 职场文书
环保主题班会教案
2015/08/13 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js