Flask+Ajax动态加载案例（一）与INPUT控件的交互

最新推荐文章于 2022-10-17 08:39:21 发布

dhjabc_1

最新推荐文章于 2022-10-17 08:39:21 发布

阅读量909

点赞数 4

分类专栏： web网站项目实战（python版）

本文链接：https://blog.csdn.net/dhjabc_1/article/details/113244603

版权

web网站项目实战（python版）专栏收录该内容

12 篇文章 9 订阅

订阅专栏

本系列将介绍Flask+Ajax动态加载案例，这次先介绍与INPUT控件的交互。

涉及到前后台的代码，整体逻辑如下：
前台：使用jquery+ajax+input控件，通过获取input的控件的内容然后ajax异步加载方式传送到后台代码处理。
后台：接收前台传送过来的数据，并按照业务逻辑处理，处理完毕后，将数据打包封装成json格式的数据。
前台：将后台传送过来的json格式的数据，解码然后分别赋值给结果的input控件显示。

直接上代码：

一、整体目录结构

在这里插入图片描述

二、HTML文件（index.html）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Flask+Ajax动态加载案例（一）</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>

<body>
    <p>&nbsp;&nbsp;数据展示：&nbsp;&nbsp;
        <input type="text" id ="NAME" name="NAME">
        <input type="text" id ="AGE">
        <button id = "btn">点击获取</button>
    </p>
    <p>结果显示区：
        <input type="text" id ="NAME2">
        <input type="text" id ="AGE2">
    </p>

    <script>
        $(function() {
            $("#btn").click(function(){
                $.ajax({
                url: "ajax_post",
                type: "POST",
                dataType: "json",
                data : {NAME:$("input[name='NAME']").val(),AGE:$("input[id='AGE']").val()},
                success: function (data) {
	                $("#NAME2").val(data.name);
                    $("#AGE2").val(data.age);
                    console.log(data)}
                })
            })
        })
    </script>
</body>
</html>

三、后台代码文件（app.py）

from flask import Flask, render_template,request
import json

app = Flask(__name__)

@app.route('/ajax_post', methods=['GET', 'POST'])  # 路由
def ajax_post():
    testInfo['name'] = request.values.get('NAME')
    testInfo['age'] = request.values.get('AGE')
    print(testInfo)
    return json.dumps(testInfo)

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/index')
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug=True)

四、运行效果

在这里插入图片描述
OK，整个案例介绍完毕，这是一个相对简单的案例，作为入门的案例，非常实用，可以让我们理解前后台数据的交互动作、ajax的异步处理机制、json打包等内容。

dhjabc_1

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Flask+Ajax动态加载案例（一）与INPUT控件的交互

本系列将介绍Flask+Ajax动态加载案例，这次先介绍与INPUT控件的交互。涉及到前后台的代码，整体逻辑如下：前台：使用jquery+ajax+input控件，通过获取input的控件的内容然后ajax异步加载方式传送到后台代码处理。后台：接收前台传送过来的数据，并按照业务逻辑处理，处理完毕后，将数据打包封装成json格式的数据。前台：将后台传送过来的json格式的数据，解码然后分别赋值给结果的input控件显示。直接上代码：一、整体目录结构二、HTML文件（index.html）
复制链接

扫一扫

专栏目录