Вызовите функцию колбы из формы и отобразите результаты на той же странице - PullRequest
Новая
       4

Вызовите функцию колбы из формы и отобразите результаты на той же странице

0 голосов
/ 26 апреля 2018

У меня есть приложение 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)

Кроме того, следует отметить, что в файлах результатов.html я уже вызвал другую функцию Flask, которая перенаправила мое приложение Flask в файл results.html и отображал некоторые диаграммы.

Итак, основная проблема, с которой я сталкиваюсь, заключается в том, что я не уверен, почему ничего не происходит, когда я нажимаю кнопку. Мне кажется, что когда кнопка нажата, она должна передать предложение в функцию Flask и выполнить вычисления. Я посмотрел на несколько вопросов, которые уже были размещены здесь в StackOverflow, таких как этот: Flask - вызов функции Python для кнопки OnClick, событие но они действительно не помогли мне в этом отношении. Я действительно не понимаю, где это происходит, поэтому я был бы признателен за любую информацию или помощь с этим.

Спасибо!

РЕДАКТИРОВАТЬ: Таким образом, кажется, что первая проблема заключается в том, что функция JS вообще не вызывается при нажатии кнопки ...

1 Ответ

0 голосов
/ 26 апреля 2018

Вам нужно использовать $.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)})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...