Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页，可以更新网页的部分，而不需要重新加载整个页面
常见应用场景：地图
Json用于前后端数据的传输
获取后端数据
客户端要执行
$.ajax({
// 接受后端传来的数据
"success":function (data){
res = data["result"]
inp.eq(2).val(res)
}
})
后端需执行
def post(self):
# 定义res的值
return_data = {"result":res}
self.write(return_data)
这里只能有一个write函数，如果有多个将不会在前端输入（亲试）
向后端发送数据
前端要执行
$.ajax({
// 发送给后端的请求是什么
"type":"post",
// 后端的网址是什么
"url":"/ajax",
// 要传输的数据是什么
"data":{
"aa":a,
"bb":b,
}
})
后端需执行
def post(self):
# 获取前端传来的数据
a = self.get_argument("aa")
b = self.get_argument("bb")
案例：制作一个简单的计算器
效果
源码
后端：
import tornado.ioloop
import tornado.web
class AjaxHandler(tornado.web.RequestHandler):
# 响应函数
def get(self):
# self.write("Hello, world")
# 客户端发送get请求 则响应
self.render(r"ajax.html")
def post(self):
a = self.get_argument("aa")
b = self.get_argument("bb")
res = int(a) + int(b)
print("{}+{}={}".format(a,b,res))
return_data = {"result":res}
self.write(return_data)
if __name__ == "__main__":
application = tornado.web.Application([
(r"/ajax", AjaxHandler),
])
# 监听端口 127.0.0.1:8888 路由
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
前端：
<!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="but">计算</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var inp = $("input");
var but = $("#but");
// 获取元素的值
but.click(function (){
var a = inp.eq(0).val();
var b = inp.eq(1).val();
// console.log(a+b)
// 写ajax
$.ajax({
// 发送给后端的请求是什么
"type":"post",
"url":"/ajax",
"data":{
"aa":a,
"bb":b,
},
// 接受后端传来的数据
"success":function (data){
res = data["result"]
inp.eq(2).val(res)
},
"error":function (error){
console.log(error)
}
})
})
</script>
</body>
</html>
本文转载自: https://blog.csdn.net/dalingzi_/article/details/125354435
版权归原作者 濯莲 所有， 如有侵权，请联系我们删除。
版权归原作者 濯莲 所有， 如有侵权，请联系我们删除。