Flask с Fetch API и render_template - получает новые визуализированные данные - PullRequest
Новая
       11

Flask с Fetch API и render_template - получает новые визуализированные данные

0 голосов
/ 26 июня 2018

В моем проекте Flask из поля ввода я получаю значение JS Fetch API, введенное пользователем, и затем передаю его своей функции Python, где в зависимости от ввода пользователя я делаю разные вещи.

Все работает правильно.JavaScript получает значение, Flask видит его.

JS код: 

document.getElementById("search").addEventListener("click", function() {
    let token = new FormData();
    token.append('search', document.getElementById('search_place').value);
    const request = async() => {
        const response = await fetch('/stop', {
            method: 'POST',
            body: token,
            headers: {
                'Access-Control-Allow-Origin': '*'
            },
            mode: 'cors'
        }).then((tables) => {
            $('.table').html(tables);
        });
    };
    request();
});

С Flask для каждого пользовательского ввода я хочу изменить содержимое в шаблонах: 

return render_template('view.html', tables=[pd.DataFrame.to_html(df, index=False, justify='justify-all')])

Таким образом, пользовательдать новое значение, после нажатия кнопки «Обновить» все должно быть новым внутри шаблонов.

Я не знаю, как мне получить с помощью Fetch API ответ от Flask с новыми визуализированными данными.

Я пытаюсь: 

.then((tables) => {
            $('.table').html(tables);
        });

безуспешно.

Заранее спасибо!

1 Ответ

0 голосов
/ 26 июня 2018
  • вы вообще не используете fetch
  • вы устанавливаете заголовок ответа cors в запросе
  • mode: 'cors' - это значение по умолчанию для запросов перекрестного источника, но
  • ваш запрос того же происхождения, так почему вы что-то связываете с CORS
  • нет необходимости создавать эту функцию или использовать async await

Итак 

document.getElementById("search").addEventListener("click", function() {
    let token = new FormData();
    token.append('search', document.getElementById('search_place').value);
    fetch('/stop', { method: 'POST', body: token })
    .then(response => response.text())
    .then(tables => $('.table').html(tables));
});

но если вы настаиваете на использовании async / await 

document.getElementById("search").addEventListener("click", async () => {
    const token = new FormData();
    token.append('search', document.getElementById('search_place').value);
    const response = await fetch('/stop', { method: 'POST',body: token} );
    const tables = await response.text();
    $('.table').html(tables));
});
...