web全栈开发：web前后端数据交互。html5+jquery作为前端、Python+flask作为后端

最新推荐文章于 2023-06-26 16:31:15 发布

Kkh_8686

最新推荐文章于 2023-06-26 16:31:15 发布

阅读量1.3k

点赞数 5

分类专栏： web端 flask python 文章标签： python flask javascript html5 jquery

本文链接：https://blog.csdn.net/K_AAbb/article/details/108288583

版权

python 同时被 3 个专栏收录

43 篇文章 14 订阅

订阅专栏

web端

17 篇文章 1 订阅

订阅专栏

flask

11 篇文章 1 订阅

订阅专栏

web全栈开发：web前后端数据交互。html5+jquery作为前端、Python+flask作为后端

温馨提示：本文基于我的上一篇博客的为基础：使用 Python 的 flask 架构搭建一个简单web网站

下面是我写的一个简单前端web网页，我们分析这个网页的信息：
1.”这是首页！”，这是一个纯文字的内容；
2.“前往内容页”，这一端含有超链接的文字，我们只要点击蓝色、有下划线的“内容页”就可以转移到另外一个网页；
3.“点击1”，这是一个按钮，我们可以把一个事件绑定到这个按钮上，当按钮被点击即可以执行绑定的事件，如发送一组数据到 flask 后端；
4.“输入文本框”+“提交数据”，这是一个我们可以输入东西，然后点击“提交数据”，把输入的数据发送到后端 flask 中。

1.本次需要用到一个新技能：jQuery

jQuery是辅助JavaScript开发的库，最基本的几个选择器：1.元素选择器、2.id选额器、3.class选择器、4.群组选择器、5.*选择器；
我们通过选择器可以对选择的元素进行特定的设置
在前端用jquery为特定 id 的元素添加点击触发事件，通过触发而执行任务功能事件，如发送数组、字符串等。
若需要详细了解jQuery，到这里学习一下吧！http://www.lvyestudy.com/jquery/jq_list.aspx

2.建立一个实现前后端数据交互的工程文件，如下工程文件的结构：

在这里插入图片描述

放置在static中的图片和资源是能够被前端（JavaScript、jQuery）调用而实现动态更新。
放置在template中的 html 页面能够调用 js 、css ，同时也可以被后端 flask 反馈到发出请求的浏览器而被浏览器渲染、解析出来。

3.实现超链接功能

1.main.py

from flask import Flask,render_template,request
app = Flask(__name__)      #参数是应用模块或者包的名称。若使用一个单一模块(本例)，则用__name__
                           #该参数是必需的，Flask才知道在哪找到模板和静态文件等东西


@app.route('/index/content')        # 访问的地址，负责指向路由的路径
def content():                      # 指定的路由名称
    hdy = "hdy"
    list = ["真帅","好酷","有才华"]
    return render_template('content.html',HDY=hdy,list=list)   #自动寻找replace.html里面的键值对HDY替换成hdy


@app.route('/index')
def index():
    return render_template('index.html')   #会自动找templates文件夹里面的index.html


if __name__=="__main__":                   #程序入口
    app.run(host='127.0.0.1',port=8080)      # 0.0.0.0地址可给本机所有的IP地址访问（按ctrl+左击进入run函数修改）

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h>WOW WOW WOW ！</h>

    <h1>你变成了<a href="{{url_for('content')}}">动感超人</a> </h1>

</body>
</html>

上面的代码中 {{url_for(‘content’)}} 是创建了一个超链接，这个超链接就是通过路由转移到路由名为 content 的路由中，而 content 这个路由在 flask 中的main.py有定义。简单来说，点击这个超链接就会转到 content 的路由中，执行对应的操作。

3.运行 flask ，在浏览器输入： http://127.0.0.1:8080/index，可以得到下面的页面

在这里插入图片描述
4.当我们点击有颜色的下划线字 “动感超人” 这个超链接，即可以跳转到如下这个网页

4.实现在html前端使用jQuery将特定的数据发送到flask后端

在工程目录下添加 static 文件夹，再在该文件夹下面添加 js 文件夹，在js文件夹下面添加一个jquery-3.5.1.js 的JavaScript库文件，如下图：
方式1：下载 jquery-3.5.1.js 的包，下载连接：
链接: https://pan.baidu.com/s/1LkAdc1pHoSbpmuKk-bvndA 提取码: 2020
方式2：在线 jquery 连接：http://www.jq22.com/jquery-info122

在index.html中添加如下两个jquery.js中方式的任意一个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h>WOW WOW WOW ！</h>

    <h1>你变成了<a href="{{url_for('content')}}">动感超人</a> </h1>

</body>
<!--javascript，下面两种方式任意选一种，也可以两个都选上-->
<!-- 方式1 -->
<script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
<!-- 方式2：引用微软地址 -->
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

</html>

5.现在介绍部分更新的代码：

1.main.py新增部分：


@app.route('/index/response_01',methods=['GET'])
def response_01():
    # 设定下面这种格式接收数据，避免数据
    state = -1
    # state用来辅助判断后台是否准确收到了前台的数据
    signal = -1
    string = ''

    #使用try结构，更加安全
    try:
        signal = int(request.args.get('num',0))    # 接收整型数据，由于接受的数据格式仍是json即字符串，所以还需要作类型转换
        string = request.args.get('man','')        #接受字符串数据
        print(signal)
        print(string)
        state += 1
    except:
        pass

    return simplejson.dumps({
        'state':state,
        'reply_signal':signal+1,
        'reply_string':string + 'i do!'
    })

main.py完整代码：

from flask import Flask,render_template,request,url_for,redirect,make_response
import simplejson
app = Flask(__name__)      #参数是应用模块或者包的名称。若使用一个单一模块(本例)，则用__name__
                           #该参数是必需的，Flask才知道在哪找到模板和静态文件等东西


@app.route('/index/content')        # 访问的地址，负责指向路由的路径
def content():                      # 指定的路由名称
    hdy = "hdy"
    list = ["真帅","好酷","有才华"]
    return render_template('content.html',HDY=hdy,list=list)   #自动寻找replace.html里面的键值对HDY替换成hdy


@app.route('/index')
def index():
    return render_template('index.html')   #会自动找templates文件夹里面的index.html


@app.route('/index/response_01',methods=['GET'])
def response_01():
    # 设定下面这种格式接收数据，避免数据
    state = -1
    # state用来辅助判断后台是否准确收到了前台的数据
    signal = -1
    string = ''

    #使用try结构，更加安全
    try:
        signal = int(request.args.get('num',0))    # 接收整型数据，由于接受的数据格式仍是json即字符串，所以还需要作类型转换
        string = request.args.get('man','')        #接受字符串数据
        print(signal)
        print(string)
        state += 1
    except:
        pass

    return simplejson.dumps({
        'state':state,
        'reply_signal':signal+1,
        'reply_string':string + 'i do!'
    })


if __name__=="__main__":                   #程序入口
    app.run(host='127.0.0.1',port=8080)      # 0.0.0.0地址可给本机所有的IP地址访问（按ctrl+左击进入run函数修改）

2.index.html新增部分：
part1：新增的按钮，绑定id

 <!--新添加一个按钮，设置 id 为 btn，等下我们要通过 id 访问它！-->
<input type="button" value="点击开关1" id="btn1" >

part2：新增的按钮的触发事件

<!-- javaScript 一下方式任意选择一个，也可以两个均选择-->
<!-- 方式1: 直接用本地文件jquery-3.5.1.js-->
<script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
<!-- 方式2：引用微软jquery压缩版地址 -->
<script type="text/javascript" src="ttpsh://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

<script type="text/javascript">
    <!--用jquery为绑定特定 id 的事件添加点击触发事件-->
    $('#btn1').on("click",function () {
        var data = {
            'num': 6,
            'man': 'hdy handsome boy'
        };               //定义要发送的数据，这是键值对的方式，分别为整型、字符串
        $.ajax({
            type:'GET',                    //数据的传输方式get请求方式
            url: '/../index/response_01',  //去到指定的路由
            data:data,                     //要发送的数据，会被转化为查询字符串跟在url后面:/index/response_01/?num=6&man=hdy&handsome&boy
            dataType:'json',               //数据的发送json格式
            success:function (data) {      //分别对应当数据提交并获取.success函数有一个参数data，用来表示从后台接收到的封装好的数据。
                if(data.state>=0) {        //# 这里的data就是json格式的数据
                    // 对比下面后台返回的数据格式，很容易发现规律
                    console.log(data.reply_signal);
                    console.log(data.reply_string);
                    }
                },
                error:function () {
                    console.log("failure!");
                }
        });
    })
</script>

part3：index.html的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h>WOW WOW WOW ！</h>
    <!--超链接到路由content中-->
    <h1>你变成了<a href="{{url_for('content')}}">动感超人</a> </h1>
     <!--新添加一个按钮，设置 id 为 btn，等下我们要通过 id 访问它！-->
    <input type="button" value="点击开关1" id="btn1" >
</body>
<!-- javaScript 一下方式任意选择一个，也可以两个均选择-->
<!-- 方式1: 直接用本地文件jquery-3.5.1.js-->
<script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
<!-- 方式2：引用微软jquery压缩版地址 -->
<script type="text/javascript" src="ttpsh://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

<script type="text/javascript">
    <!--用jquery为绑定特定 id 的事件添加点击触发事件-->
    $('#btn1').on("click",function () {
        var data = {
            'num': 6,
            'man': 'hdy handsome boy'
        };               //定义要发送的数据，这是键值对的方式，分别为整型、字符串
        $.ajax({
            type:'GET',                    //数据的传输方式get请求方式
            url: '/../index/response_01',  //去到指定的路由
            data:data,                     //要发送的数据，会被转化为查询字符串跟在url后面:/index/response_01/?num=6&man=hdy&handsome&boy
            dataType:'json',               //数据的发送json格式
            success:function (data) {      //分别对应当数据提交并获取.success函数有一个参数data，用来表示从后台接收到的封装好的数据。
                if(data.state>=0) {        //# 这里的data就是json格式的数据
                    // 对比下面后台返回的数据格式，很容易发现规律
                    console.log(data.reply_signal);
                    console.log(data.reply_string);
                    }
                },
                error:function () {
                    console.log("failure!");
                }
        });
    })
</script>
</html>

3.点击运行。我在index.html页面中，点击按钮：按钮开关即可以触发按钮，触发前端给后端发送数据的事件，在调试窗口会打印如下信息：
整型：6、字符串：hdy handsome boy。
如下图所示：

在这里插入图片描述

6.再新增一个前端提交数据给后端的功能。要用到表单提交form技能

part1:main.py新增的代码：

@app.route('/index/response_02',methods=['post'])
def response_02():
    state = -1
    txt = ''
    try:
        txt = request.form['txt']   # 获取表单上名字为 txt 的主键值（为字符串）
        print(txt)
        state += 1
        print(state)

    except:
        pass
    return redirect(url_for('index'))

part2：main.py完整的代码

from flask import Flask,render_template,request,url_for,redirect,make_response
import simplejson
app = Flask(__name__)      #参数是应用模块或者包的名称。若使用一个单一模块(本例)，则用__name__
                           #该参数是必需的，Flask才知道在哪找到模板和静态文件等东西


@app.route('/index/content')        # 访问的地址，负责指向路由的路径
def content():                      # 指定的路由名称
    hdy = "hdy"
    list = ["真帅","好酷","有才华"]
    return render_template('content.html',HDY=hdy,list=list)   #自动寻找replace.html里面的键值对HDY替换成hdy


@app.route('/index')
def index():
    return render_template('index.html')   #会自动找templates文件夹里面的index.html


@app.route('/index/response_01',methods=['GET'])
def response_01():
    # 设定下面这种格式接收数据，避免数据
    state = -1
    # state用来辅助判断后台是否准确收到了前台的数据
    signal = -1
    string = ''

    #使用try结构，更加安全
    try:
        signal = int(request.args.get('num',0))    # 接收整型数据，由于接受的数据格式仍是json即字符串，所以还需要作类型转换
        string = request.args.get('man','')        #接受字符串数据
        print(signal)
        print(string)
        state += 1
    except:
        pass

    return simplejson.dumps({
        'state':state,
        'reply_signal':signal+1,
        'reply_string':string + 'i do!'
    })


@app.route('/index/response_02',methods=['post'])
def response_02():
    state = -1
    txt = ''
    try:
        txt = request.form['txt']   # 获取表单上名字为 txt 的主键值（为字符串）
        print(txt)
        state += 1
        print(state)

    except:
        pass
    return redirect(url_for('index'))



if __name__=="__main__":                   #程序入口
    app.run(host='127.0.0.1',port=8080)      # 0.0.0.0地址可给本机所有的IP地址访问（按ctrl+左击进入run函数修改）

part3：index.html新增的代码：

 <form action="/index/response_02" method="post" enctype="multipart/form-data">
        <input type="text" name="txt" id="">
        <input type="submit" value="提交数据">
        <!--这里的action指定了表单里数据要提交到的目的路由。
        当点击submit按钮时，表单里的所有值input的会被提交；
        其中，在后台我们会通过 name 去识别来自表单里的哪一个input的值！这一点很重要！-->
    </form>

part4：index.html完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h>WOW WOW WOW ！</h>
    <!--超链接到路由content中-->
    <h1>你变成了<a href="{{url_for('content')}}">动感超人</a> </h1>
     <!--新添加一个按钮，设置 id 为 btn，等下我们要通过 id 访问它！-->
    <input type="button" value="点击开关1" id="btn1" >

    <form action="/index/response_02" method="post" enctype="multipart/form-data">
        <input type="text" name="txt" id="">
        <input type="submit" value="提交数据">
        <!--这里的action指定了表单里数据要提交到的目的路由。
        当点击submit按钮时，表单里的所有值input的会被提交；
        其中，在后台我们会通过 name 去识别来自表单里的哪一个input的值！这一点很重要！-->
    </form>

</body>
<!-- javaScript 一下方式任意选择一个，也可以两个均选择-->
<!-- 方式1: 直接用本地文件jquery-3.5.1.js-->
<script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
<!-- 方式2：引用微软jquery压缩版地址 -->
<script type="text/javascript" src="ttpsh://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

<script type="text/javascript">
    <!--用jquery为绑定特定 id 的事件添加点击触发事件-->
    $('#btn1').on("click",function () {
        var data = {
            'num': 6,
            'man': 'hdy handsome boy'
        };               //定义要发送的数据，这是键值对的方式，分别为整型、字符串
        $.ajax({
            type:'GET',                    //数据的传输方式get请求方式
            url: '/../index/response_01',  //去到指定的路由
            data:data,                     //要发送的数据，会被转化为查询字符串跟在url后面:/index/response_01/?num=6&man=hdy&handsome&boy
            dataType:'json',               //数据的发送json格式
            success:function (data) {      //分别对应当数据提交并获取.success函数有一个参数data，用来表示从后台接收到的封装好的数据。
                if(data.state>=0) {        //# 这里的data就是json格式的数据
                    // 对比下面后台返回的数据格式，很容易发现规律
                    console.log(data.reply_signal);
                    console.log(data.reply_string);
                    }
                },
                error:function () {
                    console.log("failure!");
                }
        });
    })
</script>
</html>

打开浏览器，输入地址： http://127.0.0.1:8080/index，得到如下页面：

输入想要发给后端的数据，点击提交数据即可，再调试窗口可以看到后台提取并且打印出来我们在前端输入的数据，如下图：

7.至此，结束。

完成了前端、后端进行数据的交换。

最好，感谢这位博主，这边博文引用了他的内容：萧班

Kkh_8686

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
web全栈开发：web前后端数据交互。html5+jquery作为前端、Python+flask作为后端

web前后端数据交互，jQuery作为jQuery辅助JavaScript开发的库，最基本的几个选择器：1.元素选择器、2.id选额器、3.class选择器、4.群组选择器、5.*选择器1.建立一个实现前后端数据交互的工程文件，如下工程文件的结构：放置在static中的图片与资源能够被前端（JavaScript、jQuery）调用而实现动态更新。放置在template中的 html 页面能狗调用 js 、css ，同时也可以被后端 flask 反馈到发出请求的浏览器而被浏览器渲染、解析出来。
复制链接

扫一扫

专栏目录