0
Ich bin ein Anfänger in Python und AJAX, warum, wenn ich app.py mit app.html ausführe, wird das Ergebnis, das ich anzeigen möchte, durch ein ganzes Formular ersetzt?Wie schicke ich das Formular korrekt an Flask mit AJAX?
Hier ist mein Code:
from flask import Flask, render_template, request
app = Flask(__name__,
template_folder='C:\\Users\\iyzadsyammil\\PycharmProjects\\PVT - Copy')
@app.route('/App',methods=['GET', 'POST'])
def showapp():
error = " "
finalpb= 0
x=0
logpb=0
if request.method == 'POST':
ingor = request.form['inGOR']
ingor = float(ingor)
try:
finalpb = ingor
except ValueError:
error = "Please enter an appropriate value!"
return render_template('app.html',error=error,finalpb=finalpb)
if __name__ == "__main__":
app.run(debug=True)
Das ist mein Python Flask
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAfJAAAAJDIxMDc1NWExLTczODgtNDBhOS1iZmYwLWRmOTZjZjc2NzVhYQ.png">
<title>Invigour Tool</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<!--<link href="dashboard.css" rel="stylesheet" type="text/css">-->
<style>
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
/* Custom page footer */
.footer {
padding-top: 10px;
margin-top: 2cm;
color: #777;
border-top: 1px solid #e5e5e5;
}
.cal{
float: right;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
width: 180px;
height: 85px;
font-size: 30px;
border-radius: 24px;
background-color: limegreen;
position: relative;
right: 0.5cm;
}
.conti{
float: right;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
width: 180px;
height: 85px;
font-size: 30px;
border-radius: 24px;
background-color: limegreen;
}
.rest{
float: right;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
width: 180px;
height: 85px;
font-size: 30px;
border-radius: 24px;
background-color: limegreen;
margin-top: 3cm;
position: relative;
left: 7cm;
}
input[type="number"]{
margin-left: 3cm;
}
select[id=cor4],[id=cor5]{
width: 165px;
}
select{
margin-left: 1cm;
}
p[id=pb],[id=rs],[id=bo],[id=co],[id=uo],[id=po],[id=zf],[id=bg],[id=pg],[id=ug],[id=bw],[id=uw],[id=pw],[id=cw],[id=iow],[id=iog]{
margin-left: 4cm;
}
tr:hover{
background-color:#f5f5f5}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.invigourenergy.com/">Invigour Energy</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="Menu">Dashboard</a></li>
<li><a href="PVT Menu">PVT Tool</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href=""> </a></li>
<li><a href=""> </a></li>
<li><a href=""> </a></li>
<li><a href=""> </a></li>
<li><a href=""> </a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<form method="POST" class="form" id="fm">
<h3>Basic PVT Application</h3>
<br>
<table>
<tr><td><u>Input Data</u></td><td></td><td></td></tr>
<tr><td> </td></tr>
<tr><td>Solution GOR(Rs) </td><td><input type="number" step="any" id="inGOR" name="inGOR"></td><td>scf/bbl</td></tr>
<tr><td>Oil Gravity </td><td><input type="number" step="any" id="inOG"></td><td>API</td></tr>
<tr><td>Gas Specific Gravity </td><td><input type="number" step="any" id="inGG"></td><td>SG(air=1)</td></tr>
<tr><td>Temperature </td><td><input type="number" step="any" id="inT"></td><td>◦F</td></tr>
<tr><td>Pressure </td><td><input type="number" step="any" id="inP"></td><td>Psia</td></tr>
<tr><td>Mole Percent H2S </td><td><input type="number" step="any" id="inH2S"></td><td>%mole</td></tr>
<tr><td>Mole Percent CO2 </td><td><input type="number" step="any" id="inCO2"></td><td>%mole</td></tr>
<tr><td>Mole Percent N2 </td><td><input type="number" step="any" id="inN2"></td><td>%mole</td></tr>
<tr><td>Water Salinity </td><td><input type="number" step="any" id="inWS"></td><td>ppm</td></tr>
</table>
<br>
<table>
<tr><td><u>Correlation</u></td><td></td></tr>
<tr><td> </td></tr>
<tr>
<td>Bubble Point Pressure(Pb) </td>
<td>
<select id="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 id="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 id="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>Oil Viscosity(µo) </td>
<td>
<select id="cor4" size="">
<option value=" "></option>
<option value="CC">Chew Connally</option>
<option value="BR">Beggs Robinson</option>
</select>
</td>
</tr>
<tr>
<td>Water Viscosity(µw) </td>
<td>
<select id="cor5" size="">
<option value=" "></option>
<option value="Mc">Mccain</option>
<option value="BB">Brill and Beggs</option>
</select>
</td>
</tr>
</table>
<br>
<button type="button" class="conti" onclick="location.href='Out';" >Continue</button><button type="submit" id="cb" class="cal">Calculate</button>
<button type="button" class="rest" onclick="res()">Reset</button>
<br>
<table class="rlt">
<tr><td><u>Result</u></td><td></td></tr>
<tr><td>Pb</td><td><p id="pb">{{finalpb}}</p></td></tr>
<tr><td>Rs(Solution GOR)</td><td><p id="rs"></p></td></tr>
<tr><td>Bo</td><td><p id="bo"></p></td></tr>
<tr><td>Co</td><td><p id="co"></p></td></tr>
<tr><td>µo</td><td><p id="uo"></p></td></tr>
<tr><td>ρo</td><td><p id="po"></p></td></tr>
<tr><td>Z Factor</td><td><p id="zf"></p></td></tr>
<tr><td>Bg</td><td><p id="bg"></p></td></tr>
<tr><td>ρg</td><td><p id="pg"></p></td></tr>
<tr><td>µg</td><td><p id="ug"></p></td></tr>
<tr><td>Bw</td><td><p id="bw"></p></td></tr>
<tr><td>µw</td><td><p id="uw"></p></td></tr>
<tr><td>ρw</td><td><p id="pw"></p></td></tr>
<tr><td>Cw</td><td><p id="cw"></p></td></tr>
<tr><td>IFT oil-water</td><td><p id="iow"></p></td></tr>
<tr><td>IFT oil-gas</td><td><p id="iog"></p></td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#fm').on('submit',function (e) {
$.ajax({
type: 'post',
url: '/App',
data: $('#fm').serialize(),
success: function (q) {
document.getElementById("pb").innerHTML= q;
}
});
e.preventDefault();
});
</script>
<br/>
<footer class="footer">
<p>Copyright © Invigour Energy 2016</p>
</footer>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Datei Dies ist mein html
haben Sie einen Blick auf meine Ajax-Teil nur
Ich habe schon beide Codeblöcke angesehen, sorry! ;) –
Was passiert, wenn Sie auf "http: // yourdomain/App" über curl in der Befehlszeile zugreifen? Versuchen Sie, einen Beitrag außerhalb Ihrer App zu schreiben, um zu simulieren, was der AJAX op macht. – halfer
wo meinst du? Ich verstehe nicht – iyzad