Json+JQ实现ajax

莫小烦

已于 2022-06-19 09:23:40 修改

阅读量297

点赞数 2

文章标签： ajax json javascript

于 2022-06-19 09:22:55 首次发布

本文链接：https://blog.csdn.net/dalingzi_/article/details/125354435

版权

本文介绍了如何使用Ajax进行前后端数据交换，以实现一个简单的计算器应用。通过jQuery的Ajax方法，前端向后端发送POST请求，传递两个数字，后端接收到数据后计算它们的和，并返回结果。前端接收到返回的Json数据后更新显示。案例中，Tornado框架用于后端处理，前端展示了一个简单的HTML页面，通过点击按钮触发Ajax请求并更新结果。

摘要由CSDN通过智能技术生成

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>