Добавляем два числа в колбу - PullRequest
0 голосов
/ 24 июня 2018
<html>
<head>
    <title>Addition</title>
    <script>
        function display(id_name,result_name){
       document.getElementById(result_name).innerHTML = document.getElementById(id_name).value;
       }
       function calculate(id1,id2,result_id) {
       document.getElementById(result_id).innerHTML = parseInt(document.getElementById(id1).value)+parseInt(document.getElementById(id2).value)
       }
    </script>
</head>
<body>
<div class="input">
    Enter 1st Number:
    <input type="text" id="input1_text">
    <button type="button" onclick="display('input1_text','input1')">Enter 1st Number</button>
    <span id="input1"></span>
</div>

<div class="input">
    Enter 2nd Number:
    <input type="text" id="input2_text">
    <button type="button" onclick="display('input2_text','input2')">Enter 2nd Number</button>
    <span id="input2"></span>
</div>
<div class="result">
    <button type="button" onclick="calculate('input1_text','input2_text','result_value')">Calculate</button>
    <span id="result_value"></span>
</div>
</body>
</html>

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

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

Вы должны создать API-функцию фляги: маршрут GET, который принимает аргумент из вашей формы и возвращает объект ответа JSON.

Затем в HTML-коде при нажатии кнопки, которая должна выполнить запрос AJAX GET.доступ к вашему маршруту API и вернуть значения на эту страницу.Это позволяет избежать повторного рендеринга Flask вашей страницы и возврата данных непосредственно в существующий клиентский веб-браузер.

Чтобы упростить динамическое манипулирование данными на веб-странице, я предлагаю JS-инфраструктуру, например angular, реагировать или vue.Лично я предпочитаю vue, так как он может быть самодостаточным, загружаться в виде скрипта на страницу и настройка часто минимальна.Документы также очень просты, и вы можете легко увидеть, как связать элементы управления вводом формы.

0 голосов
/ 24 июня 2018

Если вам не нужно использовать введенные пользователем значения в бэкэнде вашего приложения, вы можете просто выполнить вычисления во внешнем интерфейсе:

<html>
 <body>
   <p>Input first number:</p>
   <input type='text' class='first_val'>
   <p>Input second number:</p>
   <input type='text' class='second_val'>
   <div class='results'></div>
   <button type='button' class='calculate'>Calculate</button>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
   $(document).ready(function() {
     $('.calculate').click(function() {
       var val1 = parseInt($('.first_val').val());
       var val2 = parseInt($('.second_val').val());
       var val3 = val1+val2;
       $('.results').html('The result is '+val3);
     });
   });
 </script>
</html>

Редактировать: используя Python в бэкэнде, ajax можно использовать:

index.html:

<html>
 <body>
   <p>Input first number:</p>
   <input type='text' class='first_val'>
   <p>Input second number:</p>
   <input type='text' class='second_val'>
   <div class='results'></div>
   <button type='button' class='calculate'>Calculate</button>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
</script>
 <script>
   $(document).ready(function() {
     $('.calculate').click(function() {
       var val1 = $('.first_val').val();
       var val2 = $('.second_val').val();
       $.ajax({
        url: "/get_numbers",
        type: "get",
        data: {val1: val1, val2:val2},
        success: function(response) {
            $(".results").html(response.packet);
         },
          error: function(xhr) {
          //Do Something to handle error
         }
        });
     });
   });
 </script>
</html>

Затем в приложении Python:

@app.route('/', methods=['GET', 'POST'])
def home():
   return flask.render_template('index.html')

@app.route('/get_numbers')
def get_values():
   value1 = flask.request.args.get('val1')
   value2 = flask.request.args.get('val2')
   return flask.jsonify({'data':f'<p>The result is: {value1+value2}</p>'})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...