python flask json 动态加载案例
本系列将介绍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> 数据展示：
<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打包等内容。
返回首页
python