Question

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

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

目前，我正试图通过使用javascript来做到这一点。这就是我现在所拥有的：

result.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函数根本没有被调用...

Answer 1

您需要将$.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)})

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

1 个答案: