欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

关于JSON和一言API

程序员文章站 2022-06-04 17:06:55
...

<----------个人网站传送门----------->

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>

注意：

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>

 

 

上一篇： 求帮助，图片和文本要在一行显示_html/css_WEB-ITnose

下一篇： 一言+逐字出现特效

推荐阅读