简单的计数 javascript 任务在烧瓶中不起作用答案

【问题标题】：Simple counting javascript task not working in flask简单的计数 javascript 任务在烧瓶中不起作用
【发布时间】：2021-08-18 19:51:01
【问题描述】：

我正在创建一个 Flask 应用程序，我刚刚开始尝试混合使用 Flask 和 javascript，我的脚本非常简单：

<!DOCTYPE html>
<html>
<body>
<button id="mybtn">click me to start</button>
<p>click the button to start the count</p>
<p id="demo"></p>

<script>
document.getElementById("mybtn").addEventListener("click", startTimer);
var t = 0;

function startTimer(){
  var myVar = setInterval(myTimer, 5000);
}


function myTimer() {
  t = t + 1;  
  //var d = new Date();
  //var t = d.toLocaleTimeString();
  document.getElementById("demo").innerHTML = t;
}
</script>

</body>
</html>

如果我尝试在烧瓶中实现它，它无法开始计数...为什么？我究竟做错了什么？ Flask 输出没有显示任何内容，没有错误，甚至看不到我做错了什么。

<!DOCTYPE html>

{% extends "base.html" %}

{% block leftsidebar %}
    
<form  method="POST">
    <div class="bs-component">
        <div class="card border-dark mb-3" style="max-width: 20rem;">
            <div class="card-header">start the thing</div>
            <div class="card-body">
                <input type="submit" id="btncapt" class="btn btn-primary" name="start" value="start">
                <img src="{{ img_source }}" style="width:80px;height:40px;" onerror="this.style.display='none'">
            </div>
        </div>  
    </div>

</form>

<div class="bs-component">
    <div class="card border-dark mb-3" style="max-width: 20rem;">
        <div class="card-header">Respuesta</div>
        <div class="card-body">
            
            <p class="card-text" id="updtval">
                
            </p>
                
        </div>
    </div>
</div>

<script>

document.getElementById("btncapt").addEventListener("click", startTimer);
var t = 0; 

function startTimer(){
    var setime = setInterval(myTimer, 5000);
}

function myTimer(){
    t = t + 1;
    document.getElementById("updtval").innerHTML = t;
}

</script>
{% endblock %}

这是我的烧瓶应用：

@app.route('/vistgen', methods = ['GET','POST'])
def vgen():

img_pause = '/static/img/bootstrap_icons/pause-circle.svg'
img_working = '/static/img/animated_captura.gif'

if request.form.get('start') == 'start':

    return render_template('vistgen.html', img_source = img_working) 

else:
    
    return render_template('vistgen.html', img_source = img_pause)

【问题讨论】：

“Flask 输出没有显示任何东西”你为什么会期望它呢？ Flask 是server，定时器运行在client。现在，如果页面无法加载，那么我将检查烧瓶终端输出。但是，您需要检查 JavaScript 控制台是否有错误。
@Jared Smith。我在谈论错误或异常......不过，感谢您的输入，不知道 js 终端输出（对所有这些来说都是新的）
不确定这是否有帮助：medium.com/@crawftv/javascript-jinja-flask-b0ebfdb406b3

标签： javascript flask

【解决方案1】：

这不是因为flask与js“合并”，而是HTML中的form标签是如何工作的。

当以 HTML 格式提交表单时，使用<input type="submit">，将加载表单的操作页面。由于这里是同一个页面，页面将在提交时重新加载，这意味着浏览器中的所有 javascript 都被重置（以某种方式）。

我假设您尝试在不重新加载页面的情况下提交表单，异步请求是可能的，您可以通过添加以下 js 来实现。但请注意，页面不会重新加载，因此您可能在服务器（flask 端）生成的任何 HTML 都不会更新（但表单将在后台提交）。

document.addEventListener("submit", (e) => {
  // Store reference to form to make later code easier to read
  const form = e.target;

  // Post data using the Fetch API
  fetch(form.action, {
    method: form.method,
    body: new FormData(form),
  });

  // Prevent the default form submit
  e.preventDefault();
});

您可以在此处查看有关此内容以及如何扩展的更多信息：https://pqina.nl/blog/async-form-posts-with-a-couple-lines-of-vanilla-javascript/

【讨论】：

谢谢，@Palash Bansal，您的意见，我会检查您的链接，看看我是否可以提供解决方案。
我并没有真正得到你的代码，或者如何实现它。正如您所说，input type="submit" 是问题所在。如果我用它的 id 代替一个简单的按钮，java 脚本就可以正常工作，没有任何进一步的复杂性。谢谢！
当然，这将使 javascript 工作，但如果您在提交表单时希望后端中有一些数据，那将不会发生。