如何使用AJAX正确地将表单提交到Flask？

Question

我是Python和AJAX的初学者，为什么当我用app.html运行app.py时，我想要显示的结果被整个表单替换了？

\n\n

这是我的代码：

\n\n

from flask import Flask, render_template, request\n\napp = Flask(__name__, \ntemplate_folder=\'C:\\\\Users\\\\iyzadsyammil\\\\PycharmProjects\\\\PVT - Copy\')\n\n@app.route(\'/App\',methods=[\'GET\', \'POST\'])\ndef showapp():\nerror = " "\nfinalpb= 0\nx=0\nlogpb=0\n\nif request.method == \'POST\':\n    ingor = request.form[\'inGOR\']\n\n    ingor = float(ingor)\n\n    try:\n        finalpb = ingor\n    except ValueError:\n        error = "Please enter an appropriate value!"\n\nreturn render_template(\'app.html\',error=error,finalpb=finalpb)\n\nif __name__ == "__main__":\n  app.run(debug=True)\n

\n\n

这是我的 Python Flask 文件

\n\n

<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\n    <meta name="description" content="">\n    <meta name="author" content="">\n    <link rel="icon" href="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAfJAAAAJDIxMDc1NWExLTczODgtNDBhOS1iZmYwLWRmOTZjZjc2NzVhYQ.png">\n\n    <title>Invigour Tool</title>\n\n    <!-- Bootstrap core CSS -->\n    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">\n    <!-- Custom styles for this template -->\n    <!--<link href="dashboard.css" rel="stylesheet" type="text/css">-->\n    <style>\n\n/* Move down content because we have a fixed navbar that is 50px tall */\nbody {\n  padding-top: 50px;\n\n}\n\n/*\n * Global add-ons\n */\n\n.sub-header {\n  padding-bottom: 10px;\n  border-bottom: 1px solid #eee;\n}\n\n/*\n * Top navigation\n * Hide default border to remove 1px line.\n */\n.navbar-fixed-top {\n  border: 0;\n}\n\n/*\n * Sidebar\n */\n\n/* Hide for mobile, show later */\n.sidebar {\n  display: none;\n}\n@media (min-width: 768px) {\n  .sidebar {\n    position: fixed;\n    top: 51px;\n    bottom: 0;\n    left: 0;\n    z-index: 1000;\n    display: block;\n    padding: 20px;\n    overflow-x: hidden;\n    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */\n    background-color: #f5f5f5;\n    border-right: 1px solid #eee;\n  }\n}\n\n/* Sidebar navigation */\n.nav-sidebar {\n  margin-right: -21px; /* 20px padding + 1px border */\n  margin-bottom: 20px;\n  margin-left: -20px;\n}\n.nav-sidebar > li > a {\n  padding-right: 20px;\n  padding-left: 20px;\n}\n.nav-sidebar > .active > a,\n.nav-sidebar > .active > a:hover,\n.nav-sidebar > .active > a:focus {\n  color: #fff;\n  background-color: #428bca;\n}\n\n/*\n * Main content\n */\n\n.main {\n  padding: 20px;\n}\n@media (min-width: 768px) {\n  .main {\n    padding-right: 40px;\n    padding-left: 40px;\n  }\n}\n.main .page-header {\n  margin-top: 0;\n}\n\n/*\n * Placeholder dashboard ideas\n */\n\n.placeholders {\n  margin-bottom: 30px;\n  text-align: center;\n}\n.placeholders h4 {\n  margin-bottom: 0;\n}\n.placeholder {\n  margin-bottom: 20px;\n}\n.placeholder img {\n  display: inline-block;\n  border-radius: 50%;\n}\n\n/* Custom page footer */\n.footer {\n  padding-top: 10px;\n  margin-top: 2cm;\n  color: #777;\n  border-top: 1px solid #e5e5e5;\n\n}\n\n.cal{\n    float: right;\n    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);\n    width: 180px;\n    height: 85px;\n    font-size: 30px;\n    border-radius: 24px;\n    background-color: limegreen;\n    position: relative;\n    right: 0.5cm;\n}\n\n.conti{\n    float: right;\n    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);\n    width: 180px;\n    height: 85px;\n    font-size: 30px;\n    border-radius: 24px;\n    background-color: limegreen;\n}\n\n.rest{\n    float: right;\n    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);\n    width: 180px;\n    height: 85px;\n    font-size: 30px;\n    border-radius: 24px;\n    background-color: limegreen;\n    margin-top: 3cm;\n    position: relative;\n    left: 7cm;\n}\n\ninput[type="number"]{\n    margin-left: 3cm;\n}\n\nselect[id=cor4],[id=cor5]{\n    width: 165px;\n}\n\nselect{\n    margin-left: 1cm;\n}\n\np[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]{\n    margin-left: 4cm;\n}\n\ntr:hover{\n    background-color:#f5f5f5}\n\n    </style>\n  </head>\n\n<body>\n  <div>\n\n    <nav class="navbar navbar-inverse navbar-fixed-top">\n      <div class="container-fluid">\n        <div class="navbar-header">\n          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">\n            <span class="sr-only">Toggle navigation</span>\n            <span class="icon-bar"></span>\n            <span class="icon-bar"></span>\n            <span class="icon-bar"></span>\n          </button>\n          <a class="navbar-brand" href="http://www.invigourenergy.com/">Invigour Energy</a>\n        </div>\n        <div id="navbar" class="navbar-collapse collapse">\n          <ul class="nav navbar-nav navbar-right">\n            <li><a href="Menu">Dashboard</a></li>\n            <li><a href="PVT Menu">PVT Tool</a></li>\n            <li><a href="#">Help</a></li>\n          </ul>\n          <form class="navbar-form navbar-right">\n            <input type="text" class="form-control" placeholder="Search...">\n          </form>\n        </div>\n      </div>\n    </nav>\n\n    <div class="container-fluid">\n      <div class="row">\n        <div class="col-sm-3 col-md-2 sidebar">\n          <ul class="nav nav-sidebar">\n            <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>\n\n            <li><a href="#"> </a></li>\n            <li><a href="#"> </a></li>\n          </ul>\n          <ul class="nav nav-sidebar">\n            <li><a href=""> </a></li>\n            <li><a href=""> </a></li>\n            <li><a href=""> </a></li>\n            <li><a href=""> </a></li>\n            <li><a href=""> </a></li>\n          </ul>\n        </div>\n        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">\n          <form method="POST" class="form" id="fm">\n                <h3>Basic PVT Application</h3>\n                <br>\n                <table>\n                    <tr><td><u>Input Data</u></td><td></td><td></td></tr>\n                    <tr><td>&nbsp</td></tr>\n                    <tr><td>Solution GOR(Rs) </td><td><input type="number" step="any" id="inGOR" name="inGOR"></td><td>scf/bbl</td></tr>\n                    <tr><td>Oil Gravity </td><td><input type="number" step="any" id="inOG"></td><td>API</td></tr>\n                    <tr><td>Gas Specific Gravity </td><td><input type="number" step="any" id="inGG"></td><td>SG(air=1)</td></tr>\n                    <tr><td>Temperature </td><td><input type="number" step="any" id="inT"></td><td>\xe2\x97\xa6F</td></tr>\n                    <tr><td>Pressure </td><td><input type="number" step="any" id="inP"></td><td>Psia</td></tr>\n\n                    <tr><td>Mole Percent H2S </td><td><input type="number" step="any" id="inH2S"></td><td>%mole</td></tr>\n                    <tr><td>Mole Percent CO2 </td><td><input type="number" step="any" id="inCO2"></td><td>%mole</td></tr>\n                    <tr><td>Mole Percent N2 </td><td><input type="number" step="any" id="inN2"></td><td>%mole</td></tr>\n                    <tr><td>Water Salinity </td><td><input type="number" step="any" id="inWS"></td><td>ppm</td></tr>\n                </table>\n                <br>\n                <table>\n                    <tr><td><u>Correlation</u></td><td></td></tr>\n                    <tr><td>&nbsp</td></tr>\n                    <tr>\n                        <td>Bubble Point Pressure(Pb) </td>\n                        <td>\n                            <select id="cor1">\n                                <option value="none"></option>\n                                <option value="VB">Vasquez and beggs</option>\n                                <option value="AM">Al-Marhoun</option>\n                                <option value="G">Glaso</option>\n                                <option value="PF">Petrosky and Farshad</option>\n                                <option value="S">Standing</option>\n                            </select>\n                        </td>\n                    </tr>\n                    <tr>\n                        <td>Solution GOR(Rs)</td>\n                        <td>\n                            <select id="cor2">\n                                <option value=" "></option>\n                                <option value="VB">Vasquez and beggs</option>\n                                <option value="AM">Al-Marhoun</option>\n                                <option value="G">Glaso</option>\n                                <option value="PF">Petrosky and Farshad</option>\n                                <option value="S">Standing</option>\n                            </select>\n                        </td>\n                    </tr>\n                    <tr>\n                        <td>Oil Formation Volume Factor(Bo)  </td>\n                        <td>\n                            <select id="cor3">\n                                <option value=" "></option>\n                                <option value="VB">Vasquez and beggs</option>\n                                <option value="AM">Al-Marhoun</option>\n                                <option value="G">Glaso</option>\n                                <option value="PF">Petrosky and Farshad</option>\n                                <option value="S">Standing</option>\n                            </select>\n                        </td>\n                    </tr>\n                    <tr>\n                        <td>Oil Viscosity(\xc2\xb5o) </td>\n                        <td>\n                            <select id="cor4" size="">\n                                <option value=" "></option>\n                                <option value="CC">Chew Connally</option>\n                                <option value="BR">Beggs Robinson</option>\n                            </select>\n                        </td>\n                    </tr>\n                    <tr>\n                        <td>Water Viscosity(\xc2\xb5w) </td>\n                        <td>\n                            <select id="cor5" size="">\n                                <option value=" "></option>\n                                <option value="Mc">Mccain</option>\n                                <option value="BB">Brill and Beggs</option>\n                            </select>\n                        </td>\n                    </tr>\n                </table>\n                <br>\n                <button type="button" class="conti" onclick="location.href=\'Out\';" >Continue</button><button type="submit" id="cb" class="cal">Calculate</button>\n                <button type="button" class="rest" onclick="res()">Reset</button>\n                <br>\n\n                <table class="rlt">\n                    <tr><td><u>Result</u></td><td></td></tr>\n\n                    <tr><td>Pb</td><td><p id="pb">{{finalpb}}</p></td></tr>\n                    <tr><td>Rs(Solution GOR)</td><td><p id="rs"></p></td></tr>\n                    <tr><td>Bo</td><td><p id="bo"></p></td></tr>\n                    <tr><td>Co</td><td><p id="co"></p></td></tr>\n                    <tr><td>\xc2\xb5o</td><td><p id="uo"></p></td></tr>\n                    <tr><td>\xcf\x81o</td><td><p id="po"></p></td></tr>\n                    <tr><td>Z Factor</td><td><p id="zf"></p></td></tr>\n                    <tr><td>Bg</td><td><p id="bg"></p></td></tr>\n                    <tr><td>\xcf\x81g</td><td><p id="pg"></p></td></tr>\n                    <tr><td>\xc2\xb5g</td><td><p id="ug"></p></td></tr>\n                    <tr><td>Bw</td><td><p id="bw"></p></td></tr>\n                    <tr><td>\xc2\xb5w</td><td><p id="uw"></p></td></tr>\n                    <tr><td>\xcf\x81w</td><td><p id="pw"></p></td></tr>\n                    <tr><td>Cw</td><td><p id="cw"></p></td></tr>\n                    <tr><td>IFT oil-water</td><td><p id="iow"></p></td></tr>\n                    <tr><td>IFT oil-gas</td><td><p id="iog"></p></td></tr>\n                </table>\n                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>\n                <script>\n\n               $(\'#fm\').on(\'submit\',function (e) {\n                      $.ajax({\n                          type: \'post\',\n                          url: \'/App\',\n                          data: $(\'#fm\').serialize(),\n                          success: function (q) {\n                       document.getElementById("pb").innerHTML= q;\n                         }\n                       });\n                     e.preventDefault();\n                   });\n\n\n                </script>\n\n                <br/>\n                <footer class="footer">\n                <p>Copyright \xc2\xa9 Invigour Energy 2016</p>\n                </footer>\n            </form>\n\n        </div>\n\n        </div>\n      </div>\n  </div>\n\n\n    <!-- Bootstrap core JavaScript\n    ================================================== -->\n    <!-- Placed at the end of the document so the pages load faster -->\n    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>\n    <script>window.jQuery || document.write(\'<script src="../../assets/js/vendor/jquery.min.js"><\\/script>\')</script>\n    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>\n    <!-- Just to make our placeholder images work. Don\'t actually copy the next line! -->\n    <script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>\n    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->\n    <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>\n</body>\n</html>\n

\n\n

这是我的html

\n\n

请只看我的ajax部分

\n

Answer 1

更新回复：

让我重新表述我原来的答案：不要使用 AJAX。这是完全没有必要的。删除所有脚本项。我只是拿了你的代码，让它在我本地的 Flask 环境中很好地工作，而不需要任何 AJAX。这是您需要做的：

1) 更新您的“按钮”，使它们成为输入，type=submit 并为它们提供您想要的按钮名称的值（例如计算）。

2) 您的表单输入没有“名称”属性。如果没有它，表单就没有键/值关联。例如，查看您的 inOG 输入。你需要给它一个名字......类似的东西name="inOG"。

3）我不知道你为什么把C盘作为配置项。也许这是 Windows 的事情？

现在，当您调试时，您应该会看到表单值很好地输入。

您遇到问题有以下几个原因：

1) 你的表格太忙了。理想情况下，根据我的经验，表单实际上应该只包含必要的输入和标签。另外，使用表格来格式化 html 页面通常并不明智。如果您不想完整地编写表单，您可以考虑使用Flask-WTF 。Flask 的优点之一是能够使用像 WTF 这样的模板。

2）如果你很好地设置了表单，那么你甚至不需要使用AJAX，这可能更适合你的情况。提交表单后，您的 Flask 代码应该完成剩下的工作。

2) 如果您一心想使用 AJAX，那么值得注意的是您的 AJAX 帖子就位于表单代码的中间。由于您的浏览器按顺序读取代码，因此它会在表单完成渲染之前获取 AJAX 帖子。您应该将<script>标签插入正文的顶部或底部。

3）您正在使用JQuery，这意味着您需要将任何可执行代码包装在函数中$(document).ready。因此，一旦您按照上述方式移动了脚本，您应该编写如下：

<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();
     });

}

总之，我建议清理您的表单并完全取消 AJAX。查看您的表单数据，似乎没有任何特殊情况需要脱离正常的表单提交。

祝你好运！