小凤kz 2023-07-17 21:39 采纳率: 25%
浏览 25

python后端拿不到前端的post请求

我最近想用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>
  • 写回答

2条回答 默认 最新

  • 大师兄6668 Python领域新星创作者 2023-07-17 23:07
    关注

    你用flask写的,前端的页面是后端返回的,首先目录结构应该是OK的吧,然后你运行了后端服务之后,直接访问生成的网址是可以访问到网页的,我刚试了一下,没问题的,但是我没有安装Mongo 所以无法正常跑你的服务。你尝试修改一下下面这两个地方,另外你把你的报错发出来,看看是程序问题,还是查询数据的问题。
    写成类似于这样:

                $.ajax({
                    url: 'http://127.0.0.1:5000/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();
                        };
                    }
                });
    
    

    另外,你可以加上跨域的包,防止出现跨域问题,类似于这样:

    from flask_cors import CORS
    
    app = Flask(__name__)
    CORS(app, resources={r"/*": {"origins": "*"}})  # 允许所有来源的跨域请求
    
    
    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 7月17日

悬赏问题

  • ¥15 封装的 matplotlib animation 不显示图像
  • ¥15 python摄像头画面无法显示
  • ¥15 关于#3d#的问题:d标定算法(语言-python)
  • ¥15 cve,cnnvd漏洞扫描工具推荐
  • ¥15 图像超分real-esrgan网络自己训练模型遇到问题
  • ¥15 如何构建全国统一的物流管理平台?
  • ¥100 ijkplayer使用AndroidStudio/CMake编译,如何支持 rtsp 直播流?
  • ¥15 用js遍历数据并对非空元素添加css样式
  • ¥15 使用autodl云训练,希望有直接运行的代码(关键词-数据集)
  • ¥50 python写segy数据出错