flask ajax html 数据交互

最新推荐文章于 2024-06-22 12:09:30 发布

Hanhan_Jun

最新推荐文章于 2024-06-22 12:09:30 发布

阅读量2.8k

点赞数 1

分类专栏：可视化文章标签： flask ajax html

本文链接：https://blog.csdn.net/weixin_45754552/article/details/123424411

版权

本文详细介绍了如何使用Flask后端配合Ajax和HTML实现数据交互。通过按钮触发Ajax查询请求，Flask接收请求后进行Hive操作获取数据，并将结果返回到前端页面的文本标签中。整个过程涉及的文件包括Flask的py文件、js文件和html文件，虽然流程简单，但理解数据传递的逻辑至关重要。

摘要由CSDN通过智能技术生成

交互目标：
button按钮开始查询获取入站出站数据传到flask，flask写hive操作从外部表获取相应的数据并传到前端页面对应的文本标签内。

前言

准备flask的py文件，一个js文件

一、flask的py文件

from flask import Flask
from flask import render_template
from flask import request
import redis
import utils
from flask import jsonify
from flask import redirect, url_for
import json
import time
app = Flask(__name__)

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

#路由result要和Ajax中的url要一致
@app.route('/result', methods=['GET', 'POST'])
def get_station_info():
	#接受从Ajax传来的数据
    recv_data = request.get_data()
    if recv_data:
        #将接收到的数据进行解析
        json_re = json.loads(recv_data)
        #将解析过后的json格式的数据传入查询数据库的方法中
        result = utils.