如何在使用 jQuery 的 HTML 表单中使用两个按钮时将数据提交到烧瓶

sudointhehouse

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

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

我的 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>

使用flask的python webapp：

from flask import Flask, redirect, render_template, url_for, request, session, send_file
import time
app = Flask(__name__)
app.secret_key = "a key"

@app.route("/", methods = ["POST", "GET"])
def login():
    if request.method == "POST":
        val = request.form.get("btn_identifier_login")
        print(f"{val} is the value recieved from the button") # this is so i can debus and see what is actually recieved.
        #Sadly, this always reads 'None is the value recieved from the button'
        fieldx = request.form.get("fieldx")
        session["fieldx"] = fieldx
        fieldy = request.form.get("fieldy")
        session["fieldy"] = fieldy
        if val == 'do_a':
            time.sleep(3)# actual implementation does something complicated that takes about 3-4 seconds (during which JS shows the please wait text for a)
            return "a done"
        elif val == 'do_b':
            time.sleep(3) # actual implementation does something complicated that takes about 3-4 seconds (during which JS shows the please wait text for b)
            return "b done"
        else:
            time.sleep(1) # this is only here for debugging
            return "didnt understand button value"
    else:
        return render_template("login.html") # this is the main login page

if __name__ == "__main__":
    app.run(debug=True)

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 相关的事情。

sudointhehouse

这就是我最终解决我的问题的方法。希望对以后的新手有所帮助。

仅对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>

并且 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>

非常适合我。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。