时间戳

首页 > 解决方案 > 简单的计数 javascript 任务在烧瓶中不起作用

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

问题描述

我正在创建一个 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)

标签： javascriptflask

解决方案

这不是因为将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/

推荐阅读