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);

         });

});

原文地址:https://www.cnblogs.com/soulsjie/p/7931986.html