Python（四十三）Ajax概念、原生Ajax
给大家一个思考题：任何一个大于2的偶数都可以表示成两个质数之和，如何证明它是正确的呢？
1. JSON格式
1.1. JSON的介绍
JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。
1.2. 值类型
JSON值可以是对象、数组、数字、字符串或者三个字面值(false、null、true)中的一个，值中的字面值中的英文必须使用小写。
以上这五种都是符合JSON格式的数据。 但是我们最常用的是第一种，对象形式，因此也有多人分不清python字典，js对象和JSON对象的区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON format</title>
</head>
<body>
<script>
// JavaScript对象
var obj1={"name":"墨染",age:39}
console.log(obj1["name"]);
console.log(obj1.age);
// JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
// json 键必须带双引号
// json 值没有要求
var obj2='{"name":"墨染","age":39}' // string 字符串
console.log(obj2["name"]);
// json 与 js对象 相互转换
console.log(typeof (obj1)); // object 对象类型
console.log(typeof (obj2)); // string 字符串
var obj3 = JSON.stringify(obj1) // 把JavaScript对象转成JSON对象
console.log(obj3);
console.log(typeof obj3); // string
var obj4 = JSON.parse(obj3) // 把JSON对象转成JavaScript对象
console.log(obj4);
console.log(typeof obj4);
</script>
</body>
</html>
在Python中，导入json模块，既可以使用JSON格式数据，json文件的使用.py：
import json
dic = {'name':"一个","age":"32"}
print(type(dic))
# 字典转json
str1 = json.dumps(dic)
print(str1)
print(type(str1)) # <class 'str'>
# json转字典
str2 = json.loads(str1)
print(str2)
print(type(str2)) # <class 'dict'>
2. Ajax的使用
2.1. Ajax介绍
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = 异步 JavaScript 和 XML。 (asynchronous JavaScript and XML)
2.2. Ajax作用
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面
对于JSON格式具体和python字典来对比的话，有这样几个细节点需要大家注意：
key位置的值只能是字符串
JSON中的字符串必须是双引号
代码：传统交互方式的前端页面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/" method="post">
用户名：
<input type="text" placeholder="请输入你的名字" name="user">
<br>
密 码：
<input type="text" placeholder="请输入你的密码" name="pwd">
<br>
<input type="submit">
</form>
</body>
</html>
代码：测试传统的前端页面与后端的交互.py
# 测试代码
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
# 渲染前端写入显示
self.write("Hello, world")
# 页面渲染 相对路径
# self.render("前端页面的路径")
self.render("./04、前端页面.html")
# 数据处理
def post(self):
# get_argument 接收的是name属性值
user = self.get_argument("user")
pwd = self.get_argument("pwd")
# 输出显示
user1 = "陈宏"
pwd1 = "123456"
if user == user1 and pwd == pwd1:
print(user,pwd)
else:
self.render("./04、前端页面.html")
if __name__ == "__main__":
application = tornado.web.Application([
(r"/", MainHandler), # 路由，匹配一致，则前端数据会传递到后台，调用MainHandler的方法
])
application.listen(8888) # 端口：8888
tornado.ioloop.IOLoop.current().start()
代码：使用Ajax交互的前端页面.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入帅哥的名字">
<br>
<button >提交</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var ipt = $("input")
var btn = $("button")
btn.click(function (){
var res = ipt.val() // 接收用户输入的值
$.ajax({
"type":"post", // 提交方式post
// "type":"get", // 提交方式get
"url":"/", // post路由设置
// "url":"/Gtest", // get路由设置
"data":{
"res":res
}, // data里放的是数据，以键值对的形式传递
// 后台成功返回了数据 data：后台所返回的数据即res {"res":re_data}
"success":function (data){
alert(data["res"])
},
// 失败回调函数
"error":function (error){
alert(error)
}
})
})
</script>
</body>
</html>
代码：使用Ajax的前端页面与后端的交互.py
# 测试代码
import tornado.ioloop
import tornado.web
import random
# 提交方式 post 请求
class MainHandler(tornado.web.RequestHandler):
def get(self):
# 渲染前端写入显示
self.write("Hello, world")
# 页面渲染 相对路径
# self.render("前端页面的路径")
self.render("./04、使用Ajax交互的前端页面.html")
# 数据处理
def post(self):
li = ["这个人很帅","这个人很有钱","这个人很不错"]
# data里面的匿名
names = self.get_argument("res")
if names == "陈宏帅帅":
re_data = "非常明智的选择"
else:
re_data = random.choice(li)
# 后台数据如何传递给前端，定义字典数据
res = {"res":re_data}
# 通过write写入到前端页面
self.write(res)
# 提交方式 get 请求
class Gtest(tornado.web.RequestHandler):
def get(self):
li = ["这个人很帅","这个人很有钱","这个人很不错"]
# data里面的匿名
names = self.get_argument("res")
if names == "陈宏帅帅":
re_data = "非常明智的选择"
else:
re_data = random.choice(li)
# 后台数据如何传递给前端，定义字典数据
res = {"res":re_data}
# 通过write写入到前端页面
self.write(res)
if __name__ == "__main__":
application = tornado.web.Application([
(r"/", MainHandler), # post请求路由，匹配一致，则前端数据会传递到后台，调用MainHandler的方法
(r"/Gtest", Gtest), # get请求路由，匹配一致，则前端数据会传递到后台，调用Gtest里的方法
])
application.listen(8888) # 端口：8888
tornado.ioloop.IOLoop.current().start()
文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！
Editor：Lonelyroots
网友评论