我正在创建一个python web应用程序，它从input type =“number”获得多个用户输入，并且当按下input type =“submit”时将完成计算。我设法做到了，但似乎用户之前输入的输入因为提交时页面刷新而消失。即使按下输入类型=“提交”，任何人都可以帮助我如何保持用户输入。
这是我的python脚本：
from flask import Flask, render_template, request
import math
app = Flask(__name__, template_folder='C:\\Users\\iyzadsyammil\\.PyCharmCE2017.1\\config\\fileTemplates')
@app.route('/')
def index():
return render_template('index.html')
@app.route('/Menu')
def showmenu():
return render_template('index.html')
@app.route('/App',methods=['GET', 'POST'])
def showapp():
outpb=0
x=0
logpb=0
error=" "
if request.method=='POST':
ingor = request.form['inGOR']
inog = request.form['inOG']
ingg = request.form['inGG']
inws = request.form['inWS']
intemp = request.form['inT']
inpress = request.form['inP']
innc = request.form['inNC']
cor1 = request.form['cor1']
cor2 = request.form['cor2']
cor3 = request.form['cor3']
cor4 = request.form['cor4']
ingor = float(ingor)
inog = float(inog)
ingg = float(ingg)
inws = float(inws)
intemp = float(intemp)
inpress = float(inpress)
innc = float(innc)
try:
if cor1 == "VB":
if inog <= 30:
outpb = ((27.64*ingor/ingg)*10**((-11.172*inog)/(intemp+460)))**(1/1.0937)
else:
outpb = ((56.06*ingor/ingg)*10**((-10.393*inog)/(intemp+460)))**(1/1.187)
elif cor1 == "AM":
outpb = 0.00538088*ingor**0.715082*ingg**-1.87784*(141.5/(inog+131.5))**3.1437*(intemp+460)**1.32657
elif cor1 == "G":
x = (ingor/ingg)**0.816*((intemp**0.172)/(inog**0.989))
logpb = 1.7669 + 1.7447 * math.log10(x) - (0.30218*(math.log10(x)**2))
outpb = 10**logpb
elif cor1 == "PF":
x = 7.916*(10**-4)*inog**1.541-(4.561*(10**-5)*intemp**1.3911)
outpb = ((112.727*ingor**0.577421)/(ingg**0.8439*10**x))-1391.051
elif cor1 == "S":
outpb = 18.2*((ingor/ingg)**0.83*10**(0.00091*intemp-0.0125*inog)-1.4)
else:
outpb = "Invalid Correlation!!"
except ValueError:
error = "Please enter an appropriate value!"
return render_template('app.html',error=error,outpb=outpb)
if __name__ == "__main__":
app.run(debug=True)
这是我目前的html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Program</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="Menu">Home</a>
</li>
<li role="presentation" class="active"><a href="App">App</a>
</li>
<li role="presentation" class="active"><a href="LogIn">Log In</a>
</li>
<li role="presentation" class="active"><a href="SignUp">Sign Up</a>
</li>
</ul>
</nav>
<h3 class="text-muted">Experiment</h3>
</div>
<div class="jumbotron">
<h1>WELCOME!!</h1>
</div>
<div class="row marketing">
<form method="POST" class="col-lg-6" >
<h3>PVT Application</h3>
<br>
<table>
<tr><td>Input Data</td><td></td><td></td></tr>
<tr><td>Solution GOR(Rs) </td><td><input type="number" step="any" name="inGOR"></td><td>scf/bbl</td></tr>
<tr><td>Oil Gravity </td><td><input type="number" step="any" name="inOG"></td><td>API</td></tr>
<tr><td>Gas Gravity </td><td><input type="number" step="any" name="inGG"></td><td>gr/cc</td></tr>
<tr><td>Water Salinity </td><td><input type="number" step="any" name="inWS"></td><td>ppm</td></tr>
<tr><td>Temperature </td><td><input type="number" step="any" name="inT"></td><td>◦F</td></tr>
<tr><td>Pressure </td><td><input type="number" step="any" name="inP"></td><td>Psia</td></tr>
<tr><td>Nitrogen Content </td><td><input type="number" step="any" name="inNC"></td><td>%mol</td></tr>
</table>
<br>
<table>
<tr><td>Correlation</td><td></td></tr>
<tr>
<td>Bubble Point Pressure(Pb) </td>
<td>
<select name="cor1">
<option value="none"></option>
<option value="VB">Vasquez and beggs</option>
<option value="AM">Al-Marhoun</option>
<option value="G">Glaso</option>
<option value="PF">Petrosky and Farshad</option>
<option value="S">Standing</option>
</select>
</td>
</tr>
<tr>
<td>Solution GOR(Rs)</td>
<td>
<select name="cor2">
<option value=" "></option>
<option value="VB">Vasquez and beggs</option>
<option value="AM">Al-Marhoun</option>
<option value="G">Glaso</option>
<option value="PF">Petrosky and Farshad</option>
<option value="S">Standing</option>
</select>
</td>
</tr>
<tr>
<td>Oil Formation Volume Factor(Bo) </td>
<td>
<select name="cor3">
<option value=" "></option>
<option value="VB">Vasquez and beggs</option>
<option value="AM">Al-Marhoun</option>
<option value="G">Glaso</option>
<option value="PF">Petrosky and Farshad</option>
<option value="S">Standing</option>
</select>
</td>
</tr>
<tr>
<td>Viscosity(µo) </td>
<td>
<select name="cor4">
<option value=" "></option>
<option value="CC">Chew Connally</option>
<option value="BR">Beggs Robinson</option>
</select>
</td>
<td><input type="submit" value="Calculate"></td>
</tr>
</table>
<br>
<table >
<tr><td>Result</td><td></td></tr>
<tr><td>Pb</td><td>{{outpb}}</td></tr>
<tr><td>Rs(Solution GOR)</td><td></td></tr>
<tr><td>Corrected Pb(Nitrogen Effect)</td><td></td></tr>
<tr><td>Bo</td><td></td></tr>
<tr><td>Co</td><td></td></tr>
<tr><td>µo</td><td></td></tr>
</table>
<!--
<table>
<tr><td>Enter Length (cm) : {{l}}</td><td><input type="number" step="any" name="l"></td></tr>
<tr><td>Enter Width (cm) : {{w}}</td><td><input type="number" step="any" name="w"></td></tr>
<tr><td>Enter Height (cm) : {{h}}</td><td><input type="number" step="any" name="h"></td></tr>
<tr><td><input type="submit" value="Calculate"></td></tr>
</table>
<br/>
</form>
</div>
<footer class="footer">
<p>Copyright © Invigour Energy 2016</p>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
没有jQuery，没有Ajax。但显然你需要一些JS。
<input id="number" type="number" value="num">
<input id="submit" type="submit" value="submit">
document.getElementById("submit").addEventListener("click", function(){
var val = document.getElementById("number").value
sessionStorage.setItem("number", val);
});
window.onload = function() {
var session_value = sessionStorage.getItem("number") || 0;
document.getElementById("number").value = session_value;
}
如果你提供一些线索，你如何使用python（数据库交互，模板等），可能会考虑其他解决方案。
答案 1 :(得分：0)
点击后，<input type="submit">会显示action <form>属性，如果action为空，则会刷新页面。
您可以使用<button>元素并在function事件中为其分配click，例如：
<!-- There is no form needed if you don't need to submit -->
<div id="form">
<input type="number" id="myNumber">
<input type="number" id="myOtherNumber">
<button type="button" id="submit">Calculation</button>
</div>
JS部分：
window.onload = function () {
/* get elements */
var num_1 = document.getElementById('myNumber'),
num_2 = document.getElementById('myOtherNumber'),
btn = document.getElementById('submit');
/* do what you want with your number
when the button is clicked */
btn.onclick = function () {
window.console.log(num_1.value + num_2.value);
};
};