Question

在输入字段的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')])

因此，用户提供新值，然后在单击“刷新”按钮后，模板中的所有内容均应为新内容。

我不知道如何从Flask接收Fetch API响应以及新的渲染数据。

我正在尝试：

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

没有成功。

谢谢！

Answer 1

您根本没有正确使用提取功能
您正在请求中设置cors响应标头
mode: 'cors'是跨源请求的默认设置，但是
您的要求是同一出身，所以您为什么要和CORS搞混
无需创建该函数或使用异步等待

所以

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));
});

但是如果您坚持使用异步/等待

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));
});

具有Fetch API和render_template的烧瓶-接收新的渲染数据

1 个答案: