Question

<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个数字键，而且还要在按下按钮后显示数字。所以现在我要寻找的是使用flask框架在按下按钮时使它们启动，并且数据应该更新。我已经尝试过使用表格，所以问题出在点击第一个数字的按钮上以显示整个页面正在刷新，而我正在丢失整个数据。所以现在我该如何在python中编写这些函数并确保页面不应该重新加载。还可以重用基于参数的显示功能，而不是硬编码并分别为2个数字编写2个显示功能

Answer 1

除非您需要在应用程序的后端中使用用户输入的值，否则您只需在前端中执行计算即可：

<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>'})

Answer 2

您应该构建一个Flask API函数：一个GET路由，该路由接受表单中的参数并返回JSON响应对象。

然后在HTML中，单击应该执行AJAX GET查询以访问API路由并将值返回到该页面的按钮。这样可以避免让Flask重新渲染页面并将数据直接返回到现有的客户端Web浏览器。

为了简化在网页中动态处理数据的过程，我建议使用Angular，react或vue之类的JS框架。就个人而言，我更喜欢vue，因为它可以自包含，可以作为脚本加载到页面中，并且设置通常很少。这些文档也非常简单，您可以轻松了解如何链接表单输入控件。

在烧瓶中加两个数字

2 个答案: