Ajax
Ajax
json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> json </title>
</head>
<body>
<script>
// js 对象
var obj = {'name':'beauti','age':18};
console.log(obj); // {name: 'beauti', age: 18}
console.log(typeof obj); // object
// 定义 json 字符串
var obj1 = "{'name':'beauti','age':18}";
console.log(obj1); // {'name':'beauti','age':18}
console.log(typeof obj1); // string
// js 对象转换 json 对象 stringify
var str = JSON.stringify(obj);
console.log(str); // {"name":"beauti","age":18}
console.log(typeof str); // string
// json 字符串转换为 js 对象 parse
var obj2 = JSON.parse(str);
console.log(obj2); // {name: 'beauti', age: 18}
console.log(typeof obj2); // object
</script>
</body>
</html>
如何实现前后端交互
1、新建py文件
第一步：导入tornado库
import tornado
如果没有 tornado 库，就在后端 Terminal 下载 pip install tornado
第二步：打开web页面
import tornado.web
按住 ctrl 点击 web 打开web.py 页面
第三步：复制 25行-37行 内容到py文件
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
self.write("Hello, world")
if __name__ == "__main__":
application = tornado.web.Application([
(r"/", MainHandler),
])
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
2、判断后端是否已经运行
第一步：浏览器打开：127.0.0.1:8888
本地的 IP 地址：127.0.0.1
默认端口：8888
第二步：进入页面后，如成功打印内容，即后端运行成功
后端 py 文件
# 自定义 MainHandler 类
class MainHandler(tornado.web.RequestHandler):
# get(）访问请求
def get(self):
# 在浏览器中写入内容
self.write("Hello, world")
if __name__ == "__main__":
application = tornado.web.Application([
# r"/" 路由，调用 MainHandler 方法
(r"/", MainHandler),
])
application.listen(8888) # 默认端口 8888
tornado.ioloop.IOLoop.current().start()
自己写 form表单.py
思路：浏览器输入 url 路由，到达前端页面，用户输入信息，点击提交按钮后，信息能传输给后端并打印
代码示例：
后端：form 表单.py 文件
import tornado.ioloop
import tornado.web
# 自定义 MainHandler 类
class MainHandler(tornado.web.RequestHandler):
# get(）访问请求 获取数据
def get(self):
# render 响应界面
self.render(r'form.html')
# post 提交数据
def post(self):
a = self.get_argument('user'); # 获取用户名
b = self.get_argument('pwd'); # 获取密码
print(a,b);
self.write('成功进入');
if __name__ == "__main__":
application = tornado.web.Application([
# r"/form" 自定义路由 调用 MainHandler 方法
(r"/form", MainHandler),
])
application.listen(8888) # 默认端口 8888
tornado.ioloop.IOLoop.current().start()
前端：form.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> form 表单 </title>
</head>
<body>
<form action="/form" method="post">
<!-- get 是用来从服务器上获得数据，post 是用来向服务器传递数据 -->
用户名：<input type="text" name="user" placeholder="请输入用户名"><br>
密  码：<input type="password" name="pwd" placeholder="请输入密码"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
实现效果：
第一步：浏览器输入：127.0.0.1:8888/form 进入前端页面
第二步：页面输入用户信息，按提交按钮
第三步：后端能打印用户输入的信息
写多个 form 表单
案例：计算器
代码示例：
后端： form表单.py 文件
import tornado.ioloop
import tornado.web
# 自定义 MainHandler 类
class MainHandler(tornado.web.RequestHandler):
# get(）访问请求 获取数据
def get(self):
# render 响应界面
self.render(r'form.html')
# post 提交数据
def post(self):
a = self.get_argument('user'); # 获取用户名
b = self.get_argument('pwd'); # 获取密码
print(a,b);
self.write('成功进入');
class AjaxHandler(tornado.web.RequestHandler):
# get(）访问请求 获取数据
def get(self):
# render 响应界面
self.render(r'ajax.html')
# post 提交数据
def post(self):
a = self.get_argument('aa');
b = self.get_argument('bb');
print(a,b);
res = int(a) + int(b);
return_data = {'result':res};
self.write(return_data);
if __name__ == "__main__":
application = tornado.web.Application([
# r"/form" 自定义路由 调用 MainHandler 方法
(r"/form", MainHandler),
(r"/ajax", AjaxHandler),
])
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>
<h1>Json + JQ 实现 Ajax </h1>
<input type="text" name="a">+
<input type="text" name="b">=
<input type="text" name="c">
<button id="btn">计算</button>
<!-- 引入JQuery -->
<!-- 本地文件会有问题，有bug，后续 Django 会使用静态代理服务器 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var inpu = $('input'),btn = $('#btn');
// 获取元素的值
btn.click(function () {
var a = inpu.eq(0).val();
var b = inpu.eq(1).val();
// 测试是否获取到值
// alert(a+b);
// 发送请求
$.ajax({
// 发送数据给后台 json 数据格式
// 请求类型
'type':'post',
// 路由
'url':'/ajax',
// 数据有哪些
'data':{
'aa':a,
'bb':b
},
// 接收后端发送过来的数据
'success':function (data) {
res = data['result'];
inpu.eq(2).val(res);
},
'error':function (error) {
console.log(error);
}
})
})
</script>
</body>
</html>
实现效果：
第一步：浏览器输入：127.0.0.1:8888/ajax 进入前端页面
第二步：页面输入数据，按计算按钮，可计算结果
第三步：后端能打印用户输入的数据
