zoukankan      html  css  js  c++  java
  • json数据的格式,JavaScript、jQuery读取json数据

    JSONJavaScript 对象表示法(JavaScript Object Notation)。

    JSON的特点:

        JSON 是纯文本

        JSON 具有“自我描述性”(人类可读)

        JSON 具有层级结构(值中存在值)

        JSON 可通过 JavaScript 进行解析

    JSON 数据可使用 AJAX 进行传输

     

    JSON 语法规则

    JSON 语法是 JavaScript 对象表示法语法的子集。

    • 数据在名称/值对中

    "name" : "soulsjie"

    • 数据由逗号分隔

    "firstName":"John" , "lastName":"Doe"

    • 花括号保存对象

    { "name":"soulsjie" , "sex":"男" }

    • 方括号保存数组

    {

    "info": [

    { "firstName":"John" , "lastName":"Doe" },

    { "firstName":"Anna" , "lastName":"Smith" },

    { "firstName":"Peter" , "lastName":"Jones" }

    ]

    }

     

    数据访问:

            employees[0].lastName;

    结果是:Gates

    数据格式:

    var info= {

    "myname":"soulsjie",

    "myage":18,

    "myclass":"3班",

    "myphone":"11121212154"

    };

    JavaScript读取json的实例:

    <html>

    <body>

    <h2>在 JavaScript 中创建 JSON 对象</h2>

    <p>

    姓名: <span id="myname"></span><br />

    年龄: <span id="myage"></span><br />

    班级: <span id="myclass"></span><br />

    手机: <span id="myphone"></span><br />

    </p>

    <script type="text/javascript">

    var info= {

    "myname":"soulsjie",

    "myage":18,

    "myclass":"3班",

    "myphone":"11121212154"};

    document.getElementById("myname").innerHTML=info.myname

    document.getElementById("myage").innerHTML=info.myage

    document.getElementById("myclass").innerHTML=info.myclass

    document.getElementById("myphone").innerHTML=info.myphone

    </script>

    </body>

    </html>

    jQuery读取json数据实例:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <script src="libs/jquery-1.8.3.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

    //创建json格式的数据

    var info= {

    "myname":"soulsjie",

    "myage":18,

    "myclass":"3班",

    "myphone":"11121212154"

    };

    $("button").click(function(){//读取json的数据

                       $(".t1").html(info.myname);

                       $(".t2").html(info.myage);

                       $(".t3").html(info.myclass);

             });

    });

    </script>

    </head>

    <body>

    <button>获取JSON格式数据</button>

    <p>

             姓名:<span class="t1"></span><br/>

             年龄:<span class="t2"></span><br/>

             班级:<span class="t3"></span><br/>

    </p>

    </body>

    </html>

    利用eval ()将json字符串转换为json对象:

    //json字符串

    var test = '{ "student" : [' +

    '{ "name":"stu1" , "age":15 },' +

    '{ "name":"stu2" , "age":16 },' +

    '{ "name":"stu3" , "age":20 } ]}';

    //转换成json对象

    var objtest = eval ("(" + test + ")");

    $("button").click(function(){//读取json的数据

                       alert(objtest.student[0].name);

             });

    });

  • 相关阅读:
    bzoj 1821: [JSOI2010]Group 部落划分 Group
    codevs 1217 借教室
    洛谷 P2678 跳石头
    洛谷 P1316 丢瓶盖
    洛谷 P2683 小岛
    洛谷 P2431 正妹吃月饼
    loj #6092. 「Codeforces Round #418」恋爱循环
    loj #6091. 「Codeforces Round #418」幻想特快
    loj #6090. 「Codeforces Round #418」尘封思绪
    前端移植说明
  • 原文地址:https://www.cnblogs.com/soulsjie/p/7931986.html
Copyright © 2011-2022 走看看