javascript - How to properly submit form to Flask with AJAX? - Stack Overflow

IT技术

更新时间：2025-03-171

admin管理员组
文章数量:1326474

I'm a beginner in Python and AJAX, why when I run my app.py with app.html, the result that I want to display are replaced with a whole form?

Here is my 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)

This is my Python Flask file

<!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* e first in the head; any other head content must e *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href=".png">

    <title>Invigour Tool</title>

    <!-- Bootstrap core CSS -->
    <link href=".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="/">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>&nbsp</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>&nbsp</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=".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=".12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src=".min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src=".min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src=".js"></script>
</body>
</html>

This is my html

Please have a look at my ajax part only

I'm a beginner in Python and AJAX, why when I run my app.py with app.html, the result that I want to display are replaced with a whole form?

Here is my 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)

This is my Python Flask file

<!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* e first in the head; any other head content must e *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://media.licdn./mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAfJAAAAJDIxMDc1NWExLTczODgtNDBhOS1iZmYwLWRmOTZjZjc2NzVhYQ.png">

    <title>Invigour Tool</title>

    <!-- Bootstrap core CSS -->
    <link href="http://getbootstrap./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./">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>&nbsp</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>&nbsp</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./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./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./dist/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="http://getbootstrap./assets/js/vendor/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="http://getbootstrap./assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

This is my html

Please have a look at my ajax part only

Share Improve this question edited Jun 20, 2017 at 7:34 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Jun 20, 2017 at 5:10 iyzad 812 gold badges2 silver badges10 bronze badges

1 I looked at both code blocks already, sorry! ;) – Klaus D. Commented Jun 20, 2017 at 5:38
What happens when you access http://yourdomain/App via curl on the mand line? Try doing a post to it outside of your app to emulate what the AJAX op is doing. – halfer Commented Jun 20, 2017 at 7:36
where do you mean? i dont understand – iyzad Commented Jun 20, 2017 at 7:49
you can see this link – Tobin Commented Nov 6, 2018 at 12:52

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

Updated response:

Let me rephrase my original answer: Don't use AJAX. it is pletely unnecessary. Delete all of your script items. I just took your code and made it work on my local flask environment nicely without any AJAX. Here is what you need to do:

1) Update your 'buttons' so that they are inputs, type=submit and give them the value of the name of the button you desire (e.g. Calculate).

2) Your form inputs do not have a 'name' attribute. Without that, the form has no key/value association. For example, look at your inOG input. You need to give it a name...something like name="inOG".

3) I don't know why you have your C drive as a configuration item. Maybe it's a Windows thing?

Now when you debug, you should see the form values e in nicely.

You are running into problems for a few reasons:

1) Your form is far too busy. Ideally, in my experience, the form should really only contain the necessary inputs and labels. Also, it is generally not wise to format an html page using tables. You might consider using Flask-WTF if you don't feel like coding out a form in it's entirety. One of the nice things of Flask is the ability to use templates like WTF.

2) If you set up the form nicely, then you won't even need to use AJAX, which might be preferable in your case. The once the form is submitted, your Flask code should do the rest.

2) If you are bent on using AJAX it's worth noting that your AJAX post is right in the middle of your form code. Since your browser reads code sequentially, it is picking up an AJAX post before the form has finished rendering. You should insert your <script> tag either at the top of the body or at the bottom of it.

3) You are using JQuery, which means you need to wrap any executable code in a $(document).ready function. So, once you have moved your script as mentioned above, you should write is as follows:

<script>

$(document).ready(function(){

$('#fm').on('submit',function (e) {
     $.ajax({
      type: 'post',
      url: '/App',
      data: $('#fm').serialize(),
       success: function (q) {
       document.getElementById("pb").innerHTML= q;
       }
      });
     e.preventDefault();
     });

}

In summary, I would suggest cleaning up your form and doing away with AJAX altogether. Looking at your form data, it doesn't seem like there is anything special that would require a break away from normal form submission.

Good Luck!

So after dealing with my own issues in Flask and AJAX, I wouldn't say don't use AJAX. As an example, I had a form that needed to be submitted and it took long enough to generate a 504. Sometimes AJAX is necessary.

In the off-case where it is necessary and you happen to be using Flask (and/or FLASK-WTF) you first need to update your form element to use the new event. This can be done with the following addition.

{{ form.my_element(**{"onchange":"my_ajax_function()"}) }}

The dictionary is passed back as a kwarg to Flask forms and sets the onchange event to use my_ajax_function() (just replace this with "onclick" if it's a button)

Next update your javascript with the new function. This function should do the following:

Get any fields required to perform this work
Start the ajax request and include the url (route), the data to be sent (if any), and what action to perform on a successful/failed request.

This will update any fields as required and keep data in existing fields. I will say that it is much easier on life if you avoid AJAX and let Flask do it's thing, but sometimes this is unavoidable.

I haven't tried just returning without a response instead of using render_template, redirect, or make_response from a post request to see if the fields remain as they were, but it's definitely something to experiment with.

I've only used AJAX for creating dynamic SelectFields, but there are some promising articles on form submissions, just looks like FlaskForms doesn't know how to convert this type of request back to the Form object since they are sent as query parameters, so you'll need to manually validate the fields after they have returned. How to submit a Flask-WTF form with Ajax

本文标签： javascriptHow to properly submit form to Flask with AJAXStack Overflow

版权声明：本文标题：javascript - How to properly submit form to Flask with AJAX? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742208370a2433240.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - How to properly submit form to Flask with AJAX? - Stack Overflow

2 Answers 2

更多相关文章