Я создаю фляжное веб-приложение и хочу отобразить некоторую информацию, которую я очистил с помощью 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>
РЕДАКТИРОВАТЬ: КОД, С КОТОРЫМ Я В НАСТОЯЩЕЕ ВРЕМЯ РАБОТАЮ
1 ответ
Вопрос в том, как отправить список данных python в javascript через AJAX.
Вот возможный подход:
СТОРОНА ПИТОНА :
# 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>
Похожие вопросы
Новые вопросы
ajax
AJAX (асинхронный JavaScript и XML) — это метод создания интерактивных пользовательских интерфейсов веб-сайтов без традиционного обновления или перезагрузки веб-страницы. Он использует асинхронный обмен данными между клиентом и сервером, чтобы обновлять отображаемую информацию и беспрепятственно реагировать на взаимодействие с пользователем. Включите дополнительные теги для языков программирования, библиотек, фреймворков, веб-браузеров, протоколов и другой информации об окружающей среде.
data = request.form.getlist('data[]')console.log(dataList);, вы получаете undefined?