时间戳

首页 > 解决方案 > 从表单调用flask函数并在同一页面上显示结果

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

问题描述

我有一个 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>

应用程序.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 函数......

标签： javascriptpythonhtmlflask

解决方案

您需要$.ajax与 jquery 一起使用。首先，只需创建一个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)})

推荐阅读