python flask json 动态加载案例

admin   ·   发表于 2个月前   ·   python

本系列将介绍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打包等内容。

0 Reply   |  Until 2个月前 | 50 View
LoginCan Publish Content