从表单调用flask函数并在同一页面上显示结果答案

【问题标题】：Call flask function from form and display results on same page从表单调用flask函数并在同一页面上显示结果
【发布时间】：2018-10-07 02:58:37
【问题描述】：

我有一个 Flask 应用程序，它有一个用户可以输入句子的页面。我想获取这个用户输入并将其输入到 Flask 方法中，该方法将对那个句子执行一些计算，然后返回结果（这是一个字符串）。

理想情况下，我希望它返回到同一页面上，就在表单的提交按钮下方。

目前，我正在尝试使用 javascript 来做到这一点。这是我目前所拥有的：

结果.html

 <head>
     <script type=text/javascript>
        $(function() {
          $('a#test').bind('click', function() {
            $.getJSON('/result_sentence',{
             sentence: $('textarea[name="sentence"]').val()}, function(data) {
              // do nothing
              document.getElementById('display').innerHTML = data.result;
      });
        return false;
      });

   </script>

    </head><body>
    <!-- The form where the user inputs --> 
        <div id="interactive" style="margin-top:50px">
           <textarea style="width:100%;" rows="3" name="sentence" placeholder="Enter your sentence"></textarea>
           <a href="#" id=test button type="submit" class="btn btn-lg btn-success"> Predict </a>
           <label> I predict.. </label>
           <p><span id='display'></span></p>
        </div>

app.py

@app.route('/result_sentence')
def result_sentence():
   sentence = flask.request.args.get('sentence')
   pred = getPrediction(sentence)
   return jsonify(result=pred)

另外，应该注意的是，在 results.html 上，我已经调用了另一个 Flask 函数，它将我的 Flask 应用程序重定向到 results.html 并显示了一些图表。

所以我面临的主要问题是我不确定为什么单击按钮时什么都没有发生。在我看来，当单击按钮时，它应该将句子传递给 Flask 函数并执行计算。我查看了一堆已经在 StackOverflow 上发布的问题，例如：Flask - Calling python function on button OnClick event 但他们在这方面并没有真正帮助我。我真的不知道哪里出了问题，因此我将不胜感激任何见解或帮助。

谢谢！

编辑： 所以看来第一个问题是点击按钮时根本没有调用JS函数...

【问题讨论】：

如果您按下按钮（可能插入一个console.log）来查看是否发生这种情况，是否确定调用了 JS-Function。下一篇：flask route 调用了吗？插入打印语句以确保发生这种情况。
@MrLeeh JS 函数不会被 bind('click') 调用，但是当你向按钮添加“onclick =”时会调用 .. 但是烧瓶路由永远不会被调用.

标签： javascript python html flask

【解决方案1】：

您需要在 jquery 中使用$.ajax。首先，只需创建一个input 框和按钮，单击该按钮将触发脚本调用Ajax。在 HTML 中，当点击按钮时，javascript 会检索用户的输入，并将输入发送到烧瓶路由：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
   <body>
     <input type='text' id='word'>
     <button type='button' id ='retrieve'>Submit</button>
     <div id='wordResult'></div>
   </body>
  <script>
    $(document).ready(function() {
       $('#retrieve').click(function(){
           var word = $('#word').val();
           $.ajax({
           url: "/get_word",
           type: "get",
           data: {word: word},
           success: function(response) {
           $("#wordResult").html(response.html);
          },
          error: function(xhr) {
            //Do Something to handle error
         }
         });
       });
    });
  </script>
</html>

然后，在app.py中创建路由：

@app.route('/get_word')
def get_prediction():
  word = flask.request.args.get('word')
  return flask.jsonify({'html':getPrediction(word)})

【讨论】：

干杯，解决了！
@RachelSolomon 很高兴为您提供帮助！
@Ajax1234 我正在尝试在这里实现类似的目标：stackoverflow.com/questions/55818897/…。非常感谢您的帮助！