关于JSON和一言API

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解

JSON 语法是 JavaScript 语法的子集。

关于JSON对象和数组，用法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Json</title>
</head>
<body>
<p id="exp1"></p>
<p id="exp2"></p>
<table>
	<tr>
		<td id="exp3"></td>
		<td id="exp4"></td>
</tr>
</table>
<p id="exp5"></p>
<p id="exp6"></p>
<p id="exp7"></p>
<p id="exp8"></p>
<script>
	//访问对象值(.和[]的使用)
var myObj1 = { "name":"张三", "sex":"男", "age":20 };
var x = myObj1.name;    
var y = myObj1["name"];
document.getElementById("exp1").innerHTML = x;
document.getElementById("exp2").innerHTML = y;
    //循环对象(for-in循环)
for (x in myObj1) {
    document.getElementById("exp3").innerHTML += x + "<br>";
}
for (x in myObj1) {
    document.getElementById("exp4").innerHTML += myObj1[x] + "<br>";
	 //在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x 
}
    //嵌套 JSON 对象(friend嵌套在myObj2中)
var myObj2 = {
    "name":"李四",
    "sex":"男",
    "friend": {
        "name1":"张三",
        "name2":"王五",
        "name3":"马六"
    }
}
     //两种方法均可结合访问,共四种,如下
var a=myObj2.friend.name1;
var b=myObj2.friend["name1"];
var c=myObj2["friend"].name1;
var d=myObj2["friend"]["name1"];
document.getElementById("exp5").innerHTML = a;//a,b,c,d均可
myObj2.friend.name1="王麻子"    //修改值(直接修改即可)
delete myObj2.friend["name2"];     //删除( delete 关键字)
      //JSON 数组(在[]中书写，可通过数组下标访问)
var myObj3 = {
	"name":"王五",
	"sex":"男",
	"friend":[ "熊大", "熊二", "翠花" ]
}
var m = myObj3.friend[0];
document.getElementById("exp6").innerHTML = m;
      //循环数组(for循环)
var x="";
for (i = 0; i < myObj3.friend.length; i++) {
    x += myObj3.friend[i] + "<br>"; 
}
document.getElementById("exp7").innerHTML = x;
      //嵌套 JSON 对象中的数组
myObj4 = {
    "name":"阿狸",
    "sex":"女",
    "friend": [
        { "name":"亚索", "skills":[ "斩钢闪", "风之障壁", "踏前斩","狂风绝息斩"] },
        { "name":"洛", "skills":[ "微光飞翎", "盛大登场", "轻舞成双","惊鸿过隙"] },
        { "name":"霞", "skills":[ "双刃", "致死羽衣", "倒钩","暴风羽刃"] }
    ]
}
      //双层循环访问
for (i in myObj4.friend) {
    x += "<h1>" + myObj4.friend[i].name + "</h1>";
    for (j in myObj4.friend[i].skills) {
        x += myObj4.friend[i].skills[j] + "<br>";
    }
}
document.getElementById("exp8").innerHTML = x;
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

<tr>

</tr>

</table>

//访问对象值(.和[]的使用)

var myObj1 = { "name":"张三", "sex":"男", "age":20 };

var x = myObj1.name;

var y = myObj1["name"];

document.getElementById("exp1").innerHTML = x;

document.getElementById("exp2").innerHTML = y;

//循环对象(for-in循环)

for (x in myObj1) {

document.getElementById("exp3").innerHTML += x + "<br>";

}

for (x in myObj1) {

document.getElementById("exp4").innerHTML += myObj1[x] + "<br>";

//在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x

}

//嵌套 JSON 对象(friend嵌套在myObj2中)

var myObj2 = {

"name":"李四",

"sex":"男",

"friend": {

"name1":"张三",

"name2":"王五",

"name3":"马六"

}

//两种方法均可结合访问,共四种,如下

var a=myObj2.friend.name1;

var b=myObj2.friend["name1"];

var c=myObj2["friend"].name1;

var d=myObj2["friend"]["name1"];

document.getElementById("exp5").innerHTML = a;//a,b,c,d均可

myObj2.friend.name1="王麻子" //修改值(直接修改即可)

delete myObj2.friend["name2"]; //删除( delete 关键字)

//JSON 数组(在[]中书写，可通过数组下标访问)

var myObj3 = {

"name":"王五",

"sex":"男",

"friend":[ "熊大", "熊二", "翠花" ]

}

var m = myObj3.friend[0];

document.getElementById("exp6").innerHTML = m;

//循环数组(for循环)

var x="";

for (i = 0; i < myObj3.friend.length; i++) {

x += myObj3.friend[i] + "<br>";

}

document.getElementById("exp7").innerHTML = x;

//嵌套 JSON 对象中的数组

myObj4 = {

"name":"阿狸",

"sex":"女",

"friend": [

{ "name":"亚索", "skills":[ "斩钢闪", "风之障壁", "踏前斩","狂风绝息斩"] },

{ "name":"洛", "skills":[ "微光飞翎", "盛大登场", "轻舞成双","惊鸿过隙"] },

{ "name":"霞", "skills":[ "双刃", "致死羽衣", "倒钩","暴风羽刃"] }

]

}

//双层循环访问

for (i in myObj4.friend) {

x += "<h1>" + myObj4.friend[i].name + "</h1>";

for (j in myObj4.friend[i].skills) {

x += myObj4.friend[i].skills[j] + "<br>";

}

document.getElementById("exp8").innerHTML = x;

</script>

</body>

</html>

注意：

json 对象和 json 字符串的区别：

json 对象 var str = { "name": "张三", "sex": "男" };

json字符串 var str = '{ "name": "李四", "sex": "男" }';

在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x

json 在进行通过键名来获取值时，需要特别注意一下。

把键名赋值给另外一个变量，然后通过.方式去获取值。这种方式是行不通的，可以通过[]获取。

delete 运算符并不是彻底删除元素，而是删除它的值，但仍会保留空间。

运算符 delete 只是将该值置为 undefined，而不会影响数组长度，即将其变为稀疏数组（《JS权威指南》7.5节）。

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

结合一言API的一个小应用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一言API</title>
</head>
<body>
<span id="hitokoto">:D 获取中...</span> ——<span id="from"></span>
<script>
  var xhr = new XMLHttpRequest();
  xhr.open('get', 'https://v1.hitokoto.cn/?c=b');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      var data = JSON.parse(xhr.responseText);//获得字符串形式的响应数据。
      var hitokoto = document.getElementById('hitokoto');
	  var fromm=document.getElementById("from")
	  fromm.innerText=data.from;
      hitokoto.innerText = data.hitokoto;
    }
  }
  xhr.send();
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>一言API</title>

</head>

<body>

var xhr = new XMLHttpRequest();

xhr.open('get', 'https://v1.hitokoto.cn/?c=b');

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) {

var data = JSON.parse(xhr.responseText);//获得字符串形式的响应数据。

var hitokoto = document.getElementById('hitokoto');

var fromm=document.getElementById("from")

fromm.innerText=data.from;

hitokoto.innerText = data.hitokoto;

}

xhr.send();

</script>

</body>

</html>

关于一言API，个人特别喜欢，比如网站中的漂浮小人就用到了这个。

一言 API – 链接记忆，走过时光。

一言网(Hitokoto.cn)

越努力，越幸运！

Le-Answer

Post a new comment

越努力，越幸运！