[Python知识库]flask ajax html 数据交互

交互目标：
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.get_result(json_re)
        #分割数据
        sw_time_min = result[0][0]
        money = result[0][1]
        change_min_num = result[0][2]
        path_min = result[0][3]
        #return 将结果进行json格式化，传入Ajax
        return jsonify({"sw_time_min": sw_time_min,"money":money,"change_min_num":change_min_num,"path_min":path_min})
    else:
        print("receive data is empty")

if __name__ == '__main__':
    app.run()

get_result()方法

def get_result(json_re):
	#建立hive连接对象
    conn = hive.Connection(host='192.168.30.140', port=10000, username='root', database='default')
    #游标
    cur = conn.cursor()
    #hql语句
    hql = "select sw_time_min,money,change_min_num,path_min from path where enter_station=\'"+json_re["enter_station"]+"\' and enter_line= \'"+json_re["enter_line"][0]+"\' and out_station= \'"+json_re["out_station"]+"\' and out_line=\'"+json_re["out_line"][0]+"\' "
	#执行hql语句
    cur.execute(hql)
    #获取结果
    result = cur.fetchall()

    # print(result)
    return result

二、js文件操作Ajax

function get_station_info() {
    var line = document.getElementById("line").value; //获取用户在id为line上输入的值
	var station = document.getElementById("station").value; //获取用户在id为station上输入的值
    var line1 = document.getElementById("line1").value; //获取用户在id为line1上输入的值
    var station1 = document.getElementById("station1").value; //获取用户在id为station1上输入的值

	var msg = {enter_line:line,enter_station:station,out_line:line1,out_station:station1};
	var senddata = JSON.stringify(msg);
	//在控制台打印输出查看封装的数据
	console.log(senddata);
	// console.log(station);
	// console.log(line1);
	// console.log(station1);
    $.ajax({
		//对应着flask中的路由route('/result')
		url: "result",
		//类型为post
		type: "POST",
		//将封装好的数据传到flask
        data: senddata,
		dataType: "json",
		//上传成功后，接受flask那边传来的数据data
        success: function (data) {
            // 将传来的数据依次填充到html页面的标签中
			$("#shijian").html(data.sw_time_min);
			$("#piaojia").html(data.money);
			$("#zhonzhuancishu").html(data.change_min_num);
			//text文本类型标签填充数据要用val
			$(".path_min").val(data.path_min);
        }
    });
}

三、html文件

<button class="button" id="button" onclick ="get_station_info()">开始查询</button>

总结

提示：总的来说，操作也不是很难，就是传来传去要理清思路，欢迎评论区讨论交流