我正在尝试实现一个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>
使用flask的python网络应用程序：
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;
}
注意：这是我第一次做任何与网络应用程序相关的事情。
尝试使用val = request.form["btn_identifier_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>
并且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>
非常适合我。