本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、JSON格式
1.概念：JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。JSON是一个标记符的序列。这套标记符包含六个构造字符({、}、[、]、:、,)、字符串、数字和三个字面名。JSON值可以是对象、数组、数字、字符串或者三个字面值(false、null、true)中的一个。值中的字面值中的英文必须使用小写。JSON在线检验：www.bejson.com/
具体使用方法如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// json格式键值对的键名要有双引号包裹（声明对象时里面可以不用双引号），外面还要加上单引号
// json就是特殊格式的字符串 这个字符串能够被任何语言识别 string
// json就是做数据交换格式
// var obj = '{"name":"zhang","sex":"nan","age":18}'
// console.log(obj.name);//json不能直接通过这样取值，对象可以
// 1.json分类：1）对象类型 2）数组类型
// 1）对象类型
var obj = '{"name":"zhang","sex":"nan","age":18}'
// 2）数组类型
// json的值可以是字符串，数值类型，布尔型，对象，数组，null
var arr = '[1,2,3,false,"你好",null,[1,5,7]]'
// 2.json转js对象
var obj2 = JSON.parse(obj)
console.log(obj2.name);//转成js对象后可以取值
// 3.js对象转换成json
var objec = {"name":"zhang","sex":"nan","age":18}
var obj3 = JSON.stringify(objec)
console.log(typeof obj3); //string
</script>
</body>
</html>
二、Ajax的使用
1.概念：Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax= 异步 JavaScript 和 XML。 (asynchronous JavaScript and XML)。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必需重载整个网页面。有很多使用Ajax的应用程序案例：新浪微博、Google 地图、开心网等等。
具体演示如下所示：
1）首先在PyCharm中编写一个测试文件test.py，代码如下：
import tornado.ioloop
# ctrl+点击web进入到web.py，复制25-37行到此页面
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
# self.write("Hello, world")
# 第一步：写好前端页面后，在此处渲染前端页面，上面一行注释
# render()中传入需要渲染的页面，01ajax1.html是同层级的
# self.render("01ajax1.html")
self.render("02ajax2.html")
# 第二部：再定义一个函数进行接收。定义post提交方式
# def post(self):
# # self实例对象
# # ajax1
# # get_argument()接收前端传入的单个数据,括号里面传入前端输入标签里面的name属性值
# # get_arguments() 接收多选框的参数
# # print(self.get_argument("user"))
# # print(self.get_argument("pwd"))
#
# # 将ajax2中接收过来的值是字符串要转换成int型，里面的值环程ajax2里面设置的自定义键名aa和bb
# a = int(self.get_argument("aa"))
# b = int(self.get_argument("bb"))
# c = a+b
# # 将数据传回前端
# return_data = {"cc":c}
# # 把这个变量写入前端success成功回调函数
# self.write(return_data)
# class test(tornado.web.RequestHandler):
# def get(self):
# a = int(self.get_argument("aa"))
# b = int(self.get_argument("bb"))
# c = a+b
# # 将数据传回前端
# return_data = {"cc":c}
# # 把这个变量写入前端success成功回调函数
# self.write(return_data)
if __name__ == "__main__":
application = tornado.web.Application([
# 第三步：r"/"这里是提交路径，放入到form表单中的action属性里，保持路径一致
(r"/", MainHandler), #post提交方式的类名
(r"/test", test), #get提交方式定义的类名,前端对应的路径也要修改一下
])
# 第四步：端口转发为8888，在虚拟机里面设置主机端口和子端口也为8888（端口可以自己改）
application.listen(8000)
tornado.ioloop.IOLoop.current().start()
# 第五步：运行这个py文件，然后把前端页面打开后，再把上面的网址改成127.0.0.1:8888回车，一般会报错，点击重新运行，再在浏览器页面刷新
# 在前端页面输入信息点击提交后，打印一下查看是否能获取到数据
# 注意：这个py文件只需要运行一次，不要多次运行，不然会造成端口多次占用
# 如果想要重复运行，点击终端最左边的箭头
2）创建一个01ajax1.html来演示传统交互模式
<!--ajax同步请求-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form表单传统请求是同步请求，一条数据请求完毕之后才会有第二条数据-->
<!--在form标签里输入提交方式-->
<form action="/" method="post">
用户名：<input type="text" name="user"><br>
密 码：<input type="text" name="pwd"><br>
<input type="submit" value="提交"><br>
</form>
</body>
</html>
<!--注意：配置了远程环境后无法直接打开页面-->
<!--只能通过绝对路径打开：右击文件，选择copy path，然后选择绝对路径，复制到浏览器打开-->
<!--绝对路径打开后，页面修改的代码也可以直接在网页进行刷新-->
<!--同步请求：提交请求——》等待服务器处理——》处理完毕返回（这个过程客户端都不能做其他事情）-->
<!--异步请求：请求事件触发——》服务器处理（客户端还可以做其他事情）——》处理完毕返回-->
3）创建一个02ajax2.html文件进行ajax异步显示，具体代码如下所示：
<!--ajax异步请求-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">+
<input type="text">=
<input type="text">
<input type="button" value="提交">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script>
// 获取元素
var aipt = $("input")
// 点击事件触发
aipt.eq(3).click(function () {
// 获取元素值
var a = aipt.eq(0).val()
var b = aipt.eq(1).val()
$.ajax({
// "type":"post", //提交方式
"type":"get", //提交方式 要在test.py里面重新声明一个class
"url":"/test", //提交路径
"data":{ //提交数据
"aa":a, //自定义键名
"bb":b
},
// 成功回调函数
"success":function (data) { //data是从后台传回的数据
var c = data["cc"] //根据键名取到cc的值
aipt.eq(2).val(c) //给第二个input标签内写入c的值
},
"error":function (error) { //接收错误参数
console.log(error);
}
})
})
</script>
</body>
</html>
三、音频标签和视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.音频标签-->
<!--controls:播放 -->
<!--autoplay:自动播放（只有从360浏览器打开才可以自动播放，因为谷歌浏览器禁用了这个功能）-->
<!--muted:静音(加了静音后如果还有autoplay属性就会自动播放)-->
<!--loop:自动循环-->
<!--poster:加载的时候会显示图片-->
<!--1)方式一：-->
<!--<video src="01.mp4" controls loop poster="../image/1.jpg"></video>-->
<!--2）方式二：如果浏览器不支持第一种格式，可以加载第二种格式-->
<video controls id="avideo">
<source src="01.mp4" type="video/mp4">
<source src="01.ogg" type="video/ogg">
</video>
<!--2.音频标签-->
<!--里面的属性和视频标签一样-->
<!--<audio src="01.mp3"></audio>-->
<!--<audio>-->
<!-- <source src="01.mp3">-->
<!-- <source src="01.ogg">-->
<!--</audio>-->
<p></p>
<button>播放暂停</button>
<button id="speed">倍速播放</button>
<!--onchange:表示下拉事件，下拉就会触发这个函数事件-->
<select id="select" onchange="change()">
<option value="0.5">0.5</option>
<option value="1.0">1.0</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
</select>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script>
var avideo = document.getElementById("avideo")
var btn = document.getElementsByTagName("button")[0]
var speed = document.getElementById("speed")
btn.onclick = function(){
// paused方法检查是否是播放状态：暂停返回true，播放返回false
// console.log(avideo.paused);
if(avideo.paused){
avideo.play() //播放
}else{
avideo.pause() //暂停
}
}
function accelerate(){
// playbackRate:获取当前播放速度
$("p").text("显示倍速："+avideo.playbackRate)//显示倍速文本
}
accelerate()
speed.onclick = function () {
//获取当前倍速信息
avideo.playbackRate+=0.5
accelerate()
}
// 这里获取元素只能用js方法,不能用jquery方法
var select = document.getElementById("select")
function change() {
//获取下拉值
avideo.playbackRate = select.options[select.selectedIndex].value
accelerate()
}
</script>
</body>
</html>
