Ajax前后端交互

本文介绍: Aja x 前后端交互案例

JSON格式与Aja x的使用

（一）JSON格式
- （1）JSON介绍
- （2）JS、Python与JSON类型转换
（二）Ajax使用

（一）JSON格式

（1）JSON介绍

JSON(Ja vaSc rip t Objec t No t ation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于
ECMASc ript (欧洲计算机协会制定的js 规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
JSON是一个标记符的序列。这套标记符包含六个构造字符({、}、[、]、:、,)、字符串、数字和三个字面名。
JSON值可以是对象、数组、数字、字符串或者三个字面值(false、null、true)中的一个。值中的字面值中的英文必须使用小写。

以上这五种都是符合JSON格式的数据。但是我们最常用的是第一种，对象形式，因此也有多人分不清python 字典，js对象和JSON对象的区别。

对于JSON格式具体和python字典来对比的话，有这样几个细节点需要大家注意：

JSON中key 位置的值只能是字符串，JSON中的字符串必须是双引号
python中的字典，键是不可变数据类型，值没有固定要求
js字典，键可以是数字、字符串或布尔值

（2）JS、Py th on与JSON类型转换

①JS与JSON的转换

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <title&gt;js与json类型转换</title&gt;
</head&gt;
<body&gt;
<script&gt;
    //定义一个js对象
    js_obj = {'name':'张三','age':18}

    // js对象转成json格式的数据  字符串
    str = JSON.stringify(js_obj)
    console.log(str)             //   输出单引号变为了双引号{"name":"张三","age":18}
    // console.log(typeof str);  //   类型是string

    // json格式的数据转成js对象 object对象
    obj1 = JSON.parse(str)
    console.log(obj1);  //输出双引号变为了单引号{name: '张三', age: 18}
    console.log(typeof obj1);  //类型是object
</script>
</body>
</html>

②Py th on与JSON的转换
python 代码：

import json       #导入json模块   
# dic = {"name":"子冧","age":18,"bool":True}
# print(type(dic))  # <class 'dict'>

# 字典类型
di = {'name':'张三','age':18,'sex':'男'}
# 转成json格式数据
jd = json.dumps(di)
# print(jd)  # {"name": "u5b50u51a7", "age": 18, "sex": "u7537"}
# print(type(jd))  # <class 'str'>

# 转回python的字典
dic = json.loads(jd)
print(dic)  # {'name': '张三', 'age': 18, 'sex': '男'}
print(type(dic))  # 类型<class 'dict'>

在这里插入图片描述

（二）Ajax 使用

（1）Ajax 介绍

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX = 异步 JavaSc ript 和 XML。 (async h ro nous JavaSc ript and XML)

（2）作用

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Go o gle 地图、开心网等等。

（3）tornad o

首先在虚拟机中下载tornad opip install tornado
下载完成后可以用pip list查看是否下载成功
然后在pycharm中引入tornado模块import tornado.web
之后ctrl+鼠标左键单击一下web 单词，复制25-37行代码到自己的文件
在这里插入图片描述
后端代码：

# 前后端数据交互
# ctrl+鼠标左键单击一下web单词
import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render('test2.html')    # 引用前端界面

# 前端表单标签当中的用户及密码
    def post(self):
        print(self.get_argument('user2'))
        print(self.get_argument('pwd2'))

# 传给前端
if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),# 前端访问的路由
    ])
    application.listen(8888)
    tornado.ioloop.IOLoop.current().start()

前端代码：

<!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>
    密&amp;emsp;码： <input type="password" placeholder="请输入密码" name="pwd"> <br>
    <input type="submit" value="登录" id="btn">
<!--</form>-->


<!--jq ajax异步提交-->
<!-- 引入了jQuery模块 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
    $('#btn').click(function (){
        user = $('input[name="user"]').val()      /*通过属性选择器，选中input标签，属性为name，值为user，在获取到val*/
        pwd = $('input[name="pwd"]').val()


        //数据提交到后台
        $.ajax({
            'type':'post',       /*类型*/
            'url':'/',           /*路由*/
            'data':{
                'user2':user,
                'pwd2':pwd

            }
        })
    })
</script>

</body>
</html>

运行结果：
在这里插入图片描述

使用Ajax后，点击登陆后页面仍然保留前端样式，数据提交到后台。

（4）前后端交互 案例（加法 运算）

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前后交互案例：加法计算</title>
</head>
<body>
<input type="text" name="a">+
<input type="text" name="b">=
<input type="text" name="c">
<button id="btn">计算</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
    ipt1 = $('input[name="a"]')
    ipt2 = $('input[name="b"]')
    ipt3 = $('input[name="c"]')
    btn = $('#btn')
    btn.click(function () {
        num1 = ipt1.val() //string
        num2 = ipt2.val()

//通过前端实现
        // console.log(typeof num1)  //  查看num1类型为string
        // num3 = num1+num2
        // console.log(num3)  //   输出11，为字符串拼接
        // num3 = parseInt(num1)+parseInt(num2)    //字符串转整形
        // ipt3.val(num3)
         
//通过后端实现   
        $.ajax({
            'type':'post',
            'url':'/',
            'data':{
                'num1':num1,
                'num2':num2,
            },
            // 后台响应成功之后返回到前端页面的值
            'success':function (data) {  //data前端页面的值 字典
                num3 = data['result']
                ipt3.val(num3)
            }
            },
        )
    })
</script>
</body>
</html>

后端代码：

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render('test3.html')

    def post(self):
        num1 = int(self.get_argument('num1'))
        num2 = int(self.get_argument('num2'))
        num3 = num1+num2

        # 传给前端是字典类型的数据
        ret = {'result':num3}   #接收
        self.write(ret)         #写入


if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),
    ])
    application.listen(8888)
    tornado.ioloop.IOLoop.current().start()