zoukankan      html  css  js  c++  java
  • JSON数据与JavaScript对象转换

    使用JSON时,最基本的工作就是JSON数据与JavaScript对象之间的互相转换。如浏览器

    从服务器端获得JSON数据,然后转换为JavaScript对象在网页输出。

    SON: JavaScript Object Notation,JSON数据格式语法就是JavaScript创建对象的代码语法,所以可以使用JavaScript内建的eval()函数直接将JSON数据转换为JavaScript对象。如下:

    1. JSON数据示例

    {
        "employees": [{
            "firstName": "John",
            "lastName": "Doe"
        },
        {
            "firstName": "Anna",
            "lastName": "Smith"
        },
        {
            "firstName": "Peter",
            "lastName": "Jones"
        }]
    }

    2. JSON数据转换为JavaScript对象

    var txt = '{ "employees" : [' +
    '{ "firstName":"John" , "lastName":"Doe" },' +
    '{ "firstName":"Anna" , "lastName":"Smith" },' +
    '{ "firstName":"Peter" , "lastName":"Jones" } ]}';
    
    var obj = eval ("(" + txt + ")");
    
    console.log(obj.employees[1].firstName);

    使用eval()函数时,必须为传入的JSON数据参数添加括号'()',否则会报语法错误。但eval()的问题在于,除了可以解析JSON数据,也可 以用于执行JavaScript脚本片段,这就会带来潜在的安全问题。JSON提供了专门的JSON Parser来实现只用于解析JSON数据,不会执行scripts脚本,而且速度更快。如下:

    obj = JSON.parse(txt);

    在现在的浏览器中,如IE8, Firefox3.5, Chrome等以上版本,都提供了原生JSON解析器的支持,而且也是ECMAScript (JavaScript)的最新标准。因此,JSON Parser可以在JavaScript代码中是直接调用。

    3. JavaScript对象转换为JSON数据

    var txt = JSON.stringify(obj);

    使用JSON.strigify()函数,将Javascript对象转换为JSON文本数据。

    4. JSON数据转换示例

    <!DOCTYPE html>
    <html>
    <body>
    <h2>Create Object from JSON String</h2>
    <p>
    First Name: <span id="fname"></span><br> 
    Last Name: <span id="lname"></span><br> 
    </p> 
    <script>
    var txt = '{"employees":[' +
    '{"firstName":"John","lastName":"Doe" },' +
    '{"firstName":"Anna","lastName":"Smith" },' +
    '{"firstName":"Peter","lastName":"Jones" }]}';
    
    obj = JSON.parse(txt);
    
    document.getElementById("fname").innerHTML=obj.employees[2].firstName 
    document.getElementById("lname").innerHTML=obj.employees[2].lastName 
    
    alert("JSON Data: 
    " + JSON.stringify(obj));
    </script>
    </body>
    </html>
  • 相关阅读:
    在web项目启动时,使用监听器来执行某个方法
    spring boot --- 初级体验
    Java字符串连接最佳实践
    JPA
    基于Spring AOP的JDK动态代理和CGLIB代理
    jQuery.validate表单校验+bootstrap
    搜索技术---solr
    最常用的缓存技术---redis入门
    内外网同时访问的路由配置
    创建 Visual Studio 2017 离线安装
  • 原文地址:https://www.cnblogs.com/longshiyVip/p/4946411.html
Copyright © 2011-2022 走看看