Как отправить данные в колбу и получить их с помощью вызова Ajax? - PullRequest
Новая
       11

Как отправить данные в колбу и получить их с помощью вызова Ajax?

0 голосов
/ 01 ноября 2019

Я создаю веб-приложение для колб и хочу отобразить некоторую информацию, которую я скопировал с помощью 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 Ответ

0 голосов
/ 01 ноября 2019

Вопрос в том, как отправить список данных 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...