如何在烧瓶中发布数据，并使用 Ajax 调用获取数据？答案

【问题标题】：How to POST data in flask, and get it using an Ajax call?如何在烧瓶中发布数据，并使用 Ajax 调用获取数据？
【发布时间】：2019-11-01 15:18:09
【问题描述】：

我正在创建一个烧瓶网络应用程序，我想在一个外部文件上显示一些我用 BS4 抓取的信息。我已经导入了该文件的函数并调用了数据，我的问题是我的错误是什么？我希望能够使用 Flask 发布这些数据，然后使用 Ajax 调用来调用数据，以便我可以操作我的 HTML 页面。

我尝试了很多不同的方法，包括使用methods = ['GET', 'POST]，以及更改我的_get_data(): 函数

Flask 应用文件

#Import dependencies
from urllib.request import urlopen
from bs4 import BeautifulSoup as bs
import pandas as pd

import requests

import json
from scrape import *

from flask import Flask, render_template, jsonify, request, escape, url_for

app = Flask(__name__)

#Get out list to post
data = scrape_data()
headers = data_headers()

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

@app.route('/_get_data', methods = ['GET','POST'])
def _get_data():
    data = request.form.getlist('data[]')
    print(data)
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug = True)

HTML 文件

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "utf-8">

    <title>NBA Data Web App</title>
</head>

<body>
    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin = "anonymous"></script>
    <button id = "searchBtn"> Search </button>

    <div id = "response"></div>

    <script type = "text/javascript">
        var headers = 
        $('button#searchBtn').click(function() {
            $.ajax({
                type: "POST",
                url: "/_get_data",
                data : {'data': dataList},
                success: function(resp) {
                    $('div#response').append(resp.data)
                }
            });
        });
        console.log(dataList);


    </script>

    <ul>
        {% for elem in dataList %}

            <li>{{elem}}</li>

        {% endfor %}
    </ul>
</body>
</html>

编辑：我目前正在使用的代码

【问题讨论】：

标签： ajax python-3.x post flask get

【解决方案1】：

问题是如何通过 AJAX 将 python 数据列表发送到 javascript。

这是一种可能的方法：

Python 的一面：

# Other imports

from flask import Flask, render_template, jsonify, request, escape, url_for

app = Flask(__name__)

#Get out list to post
data = scrape_data()
headers = data_headers()

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

@app.route('/_get_data', methods = ['POST'])
def get_data():
    return jsonify({'data': data})

if __name__ == "__main__":
    app.run(debug = True)

HTML/JAVASCRIPT：

<body>

    <button id = "searchBtn"> Search </button>

    <div id = "response"></div>

    <script type = "text/javascript">
        $('button#searchBtn').click(function() {
            var data_list;
            $.post('/_get_data', {
            }).done(function(response) {
                data_list = response['data'];
                console.log(data_list);
                //If your list is received correctly, you will have to write a javascript loop to retrieve one by one the data and display them on your page
            }).fail(function() {
                alert("request failed");
            });
        });
    </script>
</body>

【讨论】：

数据是一个列表，有区别吗
不管怎样，我得到“加载资源失败：服务器响应状态为 404”
如果此代码不起作用，请尝试以下操作：data = request.form.getlist('data[]')
谢谢，在您发布此内容之前，我已经自己修复了 404 错误。问题是，响应没有用我的数据更新，我记录了它试图发布的内容，而我记录的内容显示为“未定义”
所以让我理解，当你创建 console.log(dataList); 时，你会得到 undefined？