Javascript 如何使用jQuery在HTML表单中使用两个按钮向flask提交数据_Javascript_Jquery_Css_Python 3.x_Flask

Javascript 如何使用jQuery在HTML表单中使用两个按钮向flask提交数据

javascript jquery css python-3.x flask

Javascript 如何使用jQuery在HTML表单中使用两个按钮向flask提交数据,javascript,jquery,css,python-3.x,flask,Javascript,Jquery,Css,Python 3.x,Flask,我正在尝试实现一个web应用程序，该应用程序接收用户数据以执行某项任务，然后在任务完成时显示一个新页面。当任务正在执行时（因为我正在做的事情需要一段时间），我使用jQuery向用户显示它正在后台执行，他/她需要等待 Javascript的一部分工作正常，并显示等待屏幕，但表单数据并没有发送到python上flask上运行的我的后端我的HTML文件login.HTML： <!doctype html> <html lang="en"> <h

我正在尝试实现一个web应用程序，该应用程序接收用户数据以执行某项任务，然后在任务完成时显示一个新页面。当任务正在执行时（因为我正在做的事情需要一段时间），我使用jQuery向用户显示它正在后台执行，他/她需要等待

Javascript的一部分工作正常，并显示等待屏幕，但表单数据并没有发送到python上flask上运行的我的后端

我的HTML文件

login.HTML

：

<!doctype html>

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">  
    
    <title>Connect page</title>

    <!-- Self written CSS  -->
    <link rel="stylesheet" href="static/style.css">
  </head>


<body>
  <div class="container"  id="main">
    <div class="alert" role="alert">
      <h4 class="alert-heading">Enter login details</h4>
    </div>

    <form action="#" method="post" id="form_data">
      <div class="form-group">
        <label>fieldx</label>
        <input type="text" class="form-control" value="abc" name="fieldx" />
      </div>

      <div class="form-group">
        <label>fieldy</label>
        <input type="text" class="form-control" value="xyz" name="fieldy" />
      </div>
    
      <div class="three_buttons">
        <button type="button" class="btn btn-primary btn-lg" name="btn_identifier_login" value="do_a" id="ida">Do a</button>
        <button type="button" class="btn btn-primary btn-lg" name="btn_identifier_login" value="do_b" id="idb">Do b</button>
      </div>
    </form>
  </div>

  <!-- only this to be shown when "Do a" is clicked  -->
  <div class="container hide-before-click" id="sub">
    <div class="alert" role="alert">
      <h4 class="alert-heading">Please wait while we do a...</h4>
    </div>
  </div>

  <!-- only this to be shown when "Do b" is clicked  -->
  <div class="container hide-before-click" id="search_page">
    <div class="alert" role="alert">
      <h4 class="alert-heading">Please wait while we do b...</h4>
    </div>
  </div>

  <script>
    var ida = document.getElementById("ida");
    var sub = document.getElementById("sub");
    var main = document.getElementById("main");
    var idb = document.getElementById('idb');
    var form_data = document.getElementById("form_data");
    var search_page = document.getElementById("search_page");

    ida.addEventListener("click", function(e) {
    main.classList.add("hide-before-click");
    sub.classList.remove("hide-before-click");
    form_data.submit();
    e.preventDefault();
    });

    idb.addEventListener('click', function(e) {
    main.classList.add('hide-before-click');
    search_page.classList.remove('hide-before-click');
    form_data.submit();
    e.preventDefault();
    });
    
  </script>

</body>
</html>

css文件以防万一：

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

body {
    margin: 0;
    font-family: 'Montserrat';
    background: #FFFAFA
}

.alert{
    background: #a9a9a9 
}


.container {
    padding-top: 20px;
    text-align: center;
    padding: .8em 1.2em;
}

.container2 {
    padding-top: 20px;
    text-align: center;
    padding: .8em 1.2em;
}

.three_buttons {
    display: flex;
    width: 300px;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    margin: auto;
}


.hide-before-click {
    display: none;
}

.hide {
    display: none;
    padding: .8em 1.2em;
    padding-top: 20px;
    text-align: center;
}

.spinner-border {
    text-align: center;
}

.submit_button {
    width: calc(100% - 3em);
    margin: auto;
    padding-top: 50px;
}

.form-group {
    padding-top: 10px;
    text-align: left;
}

注意：这是我第一次做任何与webapp相关的事情。

尝试使用

val=request.form[“btn\u identifier\u login”]

。这应该将输入数据输入到变量

val

这就是我最终解决问题的方法。希望它能帮助未来的新手

仅对

login.html

文件进行了更改

带有按钮的

div

更改为：

<div class="three_buttons">
        <button type="submit" class="btn btn-primary btn-lg" name="btn_identifier_login" value="do_a" id="ida">Do a</button>
        <button type="submit" class="btn btn-primary btn-lg" name="btn_identifier_login" value="do_b" id="idb">Do b</button>
</div>


做一个
做b

Javascript更改为以下内容：

<script>
    var ida = document.getElementById("ida");
    var sub = document.getElementById("sub");
    var main = document.getElementById("main");
    var idb = document.getElementById("idb");
    var form_data = document.getElementById("form_data");
    var search = document.getElementById("search");

    ida.addEventListener("click", changedisp_sub);
    idb.addEventListener("click", changedisp_search);

    function changedisp_sub() {
      main.classList.add("hide-before-click");
      sub.classList.remove("hide-before-click");  
      }

    function changedisp_search() {
      main.classList.add("hide-before-click");
      search.classList.remove("hide-before-click");  
      }
    
</script>


var ida=document.getElementById（“ida”）；
var sub=document.getElementById（“sub”）；
var main=document.getElementById（“main”）；
var idb=document.getElementById（“idb”）；
var form_data=document.getElementById（“form_data”）；
var search=document.getElementById（“search”）；
ida.addEventListener（“单击”，更改显示）；
idb.addEventListener（“单击”，更改显示搜索）；
函数changedisp_sub（）{
main.classList.add（“单击前隐藏”）；
sub.classList.remove（“单击前隐藏”）；
}
函数changedisp_search（）{
main.classList.add（“单击前隐藏”）；
search.classList.remove（“单击前隐藏”）；
}

非常适合我。

很遗憾，这似乎不起作用。我一试这个，它就说：请求不好

<script>
    var ida = document.getElementById("ida");
    var sub = document.getElementById("sub");
    var main = document.getElementById("main");
    var idb = document.getElementById("idb");
    var form_data = document.getElementById("form_data");
    var search = document.getElementById("search");

    ida.addEventListener("click", changedisp_sub);
    idb.addEventListener("click", changedisp_search);

    function changedisp_sub() {
      main.classList.add("hide-before-click");
      sub.classList.remove("hide-before-click");  
      }

    function changedisp_search() {
      main.classList.add("hide-before-click");
      search.classList.remove("hide-before-click");  
      }
    
</script>