我最近想用Python的flask库做一个抽点器。可是在启动时总是获取不到前端发来的post请求,总是None可是前端显示是成功发送的,也不知道问题出在哪,各位能不能帮我看看?
后端代码
from flask import Flask, render_template, request, Response
import pandas as pd
import json
# import numpy as np
import pymongo
from random import choice
client = pymongo.MongoClient('127.0.0.1', 27017)
db = client['chooser']
users = db['users']
app = Flask(__name__)
def find(addr):
user = users.find_one({'addr': addr})
if user:
return user
return None
@app.route('/')
def index():
addr = request.remote_addr
user = find(addr)
if user is None:
users.insert_one({'addr': addr, 'collections': {'test1': ['1', '2', '3'], 'test2': ['a', 'b', 'c']}})
collections = users.find_one({'addr': addr})['collections']
return render_template('index.html', collections=[collection for collection in collections.keys()])
@app.route('/upload', methods=['POST'])
def upload():
addr = request.remote_addr
user = find(addr)
collections = user['collections']
file = request.files.get('file')
if file:
df = pd.read_excel(file)
name = list(pd.read_excel(file, sheet_name=None).keys())[0]
# name = list(df.keys())[0]
# df = pd.DataFrame(df)
# print(list(df.columns))
if list(df.columns) != ['学号', '姓名']:
return Response(json.dumps({'status': 'error', 'msg': '列头不对'}, ensure_ascii=False))
# print(df[['学号', '姓名']])
value = []
for index, row in df.iterrows():
value.append(f'{row["学号"]} {row["姓名"]}')
collections[name] = value
users.update_one({'addr': addr}, {'$set': {'collections': collections}})
return Response(json.dumps({'status': 'success', 'msg': '上传成功'}, ensure_ascii=False))
@app.route('/choose', methods=['POST'])
def choose():
name = request.form.get('name')
print(name)
addr = request.remote_addr
user = find(addr)
collections = user['collections']
values = collections[name]
value = choice(values)
return Response(json.dumps({'status': 'success', 'data': value}, ensure_ascii=False))
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=True)
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小凤牌抽点器</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h2 class="text-center">
小凤牌抽点器网页版s1.0.0
</h2>
<div class="row clearfix">
<div class="col-md-12 column">
<h3>
请上传班级学生信息(第一列除了第一行必须写“学号”作为列头其他都为学号;第二列除了第一行必须写“姓名”作为列头其他都为学生姓名。)
</h3>
</div>
</div>
<div class="col-md-12 column">
上传Excel表格<input class="btn btn-default" id="fileInput" type="file"/>
<button class="btn btn-lg" id="upload" type="button">上传</button>
</div>
<p class="text-left">
这里是我——小凤kz的最新发明:抽点器s1.0.0版本!网页线上版!没错!就是让学生们
<del>闻风丧胆</del>
感受快乐的小程序!
</p>
备选集合
<select style="width:200px" id="collections">
<!-- <option value="bo1">bo1</option>-->
{% for collection in collections %}
<option value="{{collection}}">{{collection}}</option>
{% endfor %}
</select>
<h1 class="text-center" id="title">
准备开席
</h1>
<button class="btn btn-lg btn-block" type="button" id="start">开始</button>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').on('change', function(e){
var file = e.target.files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(result){
var msg = JSON.parse(result).msg;
var status = JSON.parse(result).status;
alert(msg);
$('#fileInput').val('');
if(status == 'success'){
location.reload();
};
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var choose_flag = false;
var interval;
$('#start').click(function() {
choose_flag = !choose_flag;
if (choose_flag) {
name = $('#collections').val();
alert(name);
<!-- return-->
if (name === null || name === '') {
alert('请选择集合');
choose_flag = false; // 取消选择标志
return;
}
$('#start').text('结束');
function start() {
$.ajax({
url: '/choose',
type: 'POST',
data: {"name": name },
contentType: false,
processData: false,
success: function(result) {
var data = JSON.parse(result).data;
$('#title').text(data);
}
});
}
// 立即执行一次请求
start();
// 每隔100毫秒执行一次请求
interval = setInterval(start, 100);
} else {
$('#start').text('开始');
clearInterval(interval);
}
});
});
</script>
</html>