Python 表单提交后在同一页上输出数据_Python_Python 3.x_Flask

Python 表单提交后在同一页上输出数据

python python-3.x flask

Python 表单提交后在同一页上输出数据,python,python-3.x,flask,Python,Python 3.x,Flask,所以我创建了一个小的flask程序，它将获取一个文件，进行一些处理，并使用yield返回一个数据流我使用html表单进行文件上传和提交。表单将文件发送到python脚本并返回输出。问题是，由于formaction属性，输出显示在不同的页面上，而我需要在同一页面上显示输出。可能在div标记中 index.html <script> if (!!window.EventSource) { var source = new EventSource('/upload'); sour

所以我创建了一个小的flask程序，它将获取一个文件，进行一些处理，并使用

yield

返回一个数据流

我使用html表单进行文件上传和提交。表单将文件发送到python脚本并返回输出。问题是，由于formaction属性，输出显示在不同的页面上，而我需要在同一页面上显示输出。可能在

div

标记中

index.html

<script>
if (!!window.EventSource) {
  var source = new EventSource('/upload');
  source.onmessage = function(e) {
    console.log(e)
    var byte = e.data;
    var res = byte.split(/\s/);
    console.log(res[0])
    $("#morse").text(res[0].slice(1,));

  }
}
</script>
<form action="/upload" method=post enctype=multipart/form-data >
    <p><input type="file" name="file" >
    <input type="submit" value="Upload" id="search_form_input">
    </form>


<div id="morse" class="info">nothing received yet</div>  // this is where is need my data

<!DOCTYPE html>
<html>
<head>
    <title>Flask App - Output data on same page after form submit</title>
</head>
<body>

    <form method=post enctype=multipart/form-data >
    <p><input type="file" name="file" >
    <input type="submit" value="Upload" id="search_form_input">
    </form>


    <div id="morse" class="info">nothing received yet</div>
    <h3>{{ result }}</h3>
    <h3>{{ file_path }}</h3>


<!-- this is where is need my data -->

</body>
</html>

这将在

http://localhost:5000/upload

而我需要它在

http://localhost:5000

我尝试使用带有响应的重定向，但它没有说

TypeError:“generator”对象不可调用

您可能不需要JavaScript来执行此操作

由于您需要“index.html”页面（即）上的结果，因此需要为同一个索引页面创建两个路由

第一个路由将加载新表单（未设置方法属性），而第二个路由将重新加载流程表单（方法属性设置为POST）。两个路由都将指向相同的索引页

下面是您的代码的外观：-

index.html

<script>
if (!!window.EventSource) {
  var source = new EventSource('/upload');
  source.onmessage = function(e) {
    console.log(e)
    var byte = e.data;
    var res = byte.split(/\s/);
    console.log(res[0])
    $("#morse").text(res[0].slice(1,));

  }
}
</script>
<form action="/upload" method=post enctype=multipart/form-data >
    <p><input type="file" name="file" >
    <input type="submit" value="Upload" id="search_form_input">
    </form>


<div id="morse" class="info">nothing received yet</div>  // this is where is need my data

<!DOCTYPE html>
<html>
<head>
    <title>Flask App - Output data on same page after form submit</title>
</head>
<body>

    <form method=post enctype=multipart/form-data >
    <p><input type="file" name="file" >
    <input type="submit" value="Upload" id="search_form_input">
    </form>


    <div id="morse" class="info">nothing received yet</div>
    <h3>{{ result }}</h3>
    <h3>{{ file_path }}</h3>


<!-- this is where is need my data -->

</body>
</html>

阅读此链接的更多内容：

您可能不需要JavaScript来完成此操作

由于您需要“index.html”页面（即）上的结果，因此需要为同一个索引页面创建两个路由

第一个路由将加载新表单（未设置方法属性），而第二个路由将重新加载流程表单（方法属性设置为POST）。两个路由都将指向相同的索引页

下面是您的代码的外观：-

index.html

<script>
if (!!window.EventSource) {
  var source = new EventSource('/upload');
  source.onmessage = function(e) {
    console.log(e)
    var byte = e.data;
    var res = byte.split(/\s/);
    console.log(res[0])
    $("#morse").text(res[0].slice(1,));

  }
}
</script>
<form action="/upload" method=post enctype=multipart/form-data >
    <p><input type="file" name="file" >
    <input type="submit" value="Upload" id="search_form_input">
    </form>


<div id="morse" class="info">nothing received yet</div>  // this is where is need my data

<!DOCTYPE html>
<html>
<head>
    <title>Flask App - Output data on same page after form submit</title>
</head>
<body>

    <form method=post enctype=multipart/form-data >
    <p><input type="file" name="file" >
    <input type="submit" value="Upload" id="search_form_input">
    </form>


    <div id="morse" class="info">nothing received yet</div>
    <h3>{{ result }}</h3>
    <h3>{{ file_path }}</h3>


<!-- this is where is need my data -->

</body>
</html>

阅读此链接的更多内容：

您应该使用Ajax来完成此类工作。它将向服务器发送一个异步请求，服务器将返回一个答案，在使用Javascript/Jquery之后，您将修改DOM以显示这些新信息。尝试使用Ajax或其他替代方法，即使用响应对象呈现相同的模板。因此，您首先要执行render_template（'some_html'），然后在处理render_template（'some_html'，data=data）并解析数据时。@Jessi我明白了。我使用ajax将文件发送到python。但问题是，该文件并不存在于post请求之外。我不想储存它。因此，所有内容都必须在该请求内。我的想法是将数据临时存储在pickle中并将其删除。您应该使用Ajax来完成这类工作。它将向服务器发送一个异步请求，服务器将返回一个答案，在使用Javascript/Jquery之后，您将修改DOM以显示这些新信息。尝试使用Ajax或其他替代方法，即使用响应对象呈现相同的模板。因此，您首先要执行render_template（'some_html'），然后在处理render_template（'some_html'，data=data）并解析数据时。@Jessi我明白了。我使用ajax将文件发送到python。但问题是，该文件并不存在于post请求之外。我不想储存它。因此，所有内容都必须在该请求内。我的想法是将数据临时存储在pickle中并将其删除