Python全栈最全学习之路-WEB前端（八）

最新推荐文章于 2021-01-05 14:09:58 发布

Fresh_anyu

最新推荐文章于 2021-01-05 14:09:58 发布

阅读量192

点赞数

分类专栏： python全栈学习文章标签： ajax json java python 字符串

本文链接：https://blog.csdn.net/Sdhrs_nn/article/details/108746445

版权

python全栈学习专栏收录该内容

36 篇文章 12 订阅

订阅专栏

Ajax

一、JSON格式

1、JSON格式

解释：
JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式，它基于ECMScript（欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
组成：
JSON是一个标记符的序列。这套标记符号包含六个构造字符（{、}、【、】、：、，）、字符串、数字和三个字面名
值类型：
JSON值可以是对象、数组、字符串或者三个字面值（false、null、true）中的一个。值中的字面值中的英文必须使用小写。
JSON在线检验：http://www.bejson.com/

2、JSON数据

{“a”: 1, "b": {1,2,3}
12.34
[1,2,3,"a","b"]
"JSON"
true

以上这五种都是符合JSON格式的数据。但是我们最常用的是第一种，对象形式，因此也有很多人分不清pyhton字典，js对象和JSON对象的区别
队友JSON格式具体和Python字典来对比的话，有这样几个细节点需要大家注意：
1、key位置的值只能是字符串
2、JSON中的字符串必须是双引号

3、JSON对象转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON对象转换</title>
</head>
<body>
<script>
    var obj = {"name": "budong", "age": 18}; // JS对象
    console.log(obj);
    console.log(typeof obj);
    obj.age = 19; // 可写
    var str = '{"name": "budong", "age": 18}'; // JS字符串
    console.log(str);
    console.log(typeof str);
    // 把JS对象转换成JSON字符串
    // JSON.stringify
    var str2 = JSON.stringify(obj);
    console.log(str2);
    console.log(typeof str2);
    // 把JSON对象转化成JS对象
    var obj2 = JSON.parse(str2);
    console.log(obj2);
    console.log(typeof obj2);
    for(var key in obj){
        console.log(key, obj[key]);
    }
    for(var key in str){
        console.log(key, str[key]); // 对与字符串，得到的是索引值
    }
</script>
</body>
</html>

在这里插入图片描述

4、Python与JSON对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传统的前后交互方式-form表单</title>
</head>
<body>
<h1>传统的前后交互</h1>
<form action="/" method="post">
    用户名<input type="text" placeholder="请输入用户名" name="user"><br>
    密&emsp;码<input type="password" placeholder="请输入密码" name="pwd"><br>
    <input type="submit" value="登录">
</form>
</body>
</html>

在这里插入图片描述
Tornado后台部分代码

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render("Ajax_form.html")
    def post(self,*args,**kwargs):
        print(self.get_argument("user"))
        print(self.get_argument("pwd"))
        self.write("登录成功")

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

在这里插入图片描述

5、jQuery中使用Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax的前后交互</title>
    <style>
        input{
            width: 60px;
            height: 20px;
        }
    </style>
</head>
<body>
<h1>Ajax前后交互</h1>
<input type="text">+
<input type="text">=
<input type="text">
<button type="button" id="btn">计算</button>
</body>
<!--网址引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
    //获取元素
    var aIpt = $("input");
    var oBox = $("#btn");
    //计算按钮的单击事件
    oBox.click(function(){
        // 获取值
        var a = aIpt.eq(0).val();
        var b = aIpt.eq(1).val();
        $.ajax({
            "type": "post", // 提交的方式
            "url": "/", // 提交的路径
            "data": { // 提交的数据，json数据
                "aa": a,
                "bb": b
            },
            //成功之后的回调函数
            "success": function(data){
                var c = data["result"];
                aIpt.eq(2).val(c)
            },
            //请求错误之后的回调函数
            "error": function(error){
                console.log(error);
            }
        })
    })
</script>
</html>

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render("Ajax_jquery.html")
    def post(self,*args,**kwargs):
        a = int(self.get_argument("aa"))
        b = int(self.get_argument("bb"))
        c = a + b
        return_data = {"result": c}
        self.write(return_data)

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