首页 > 解决方案 > Python Flask Web 应用程序 - 多行输入选项

问题描述

我正在构建一个 Flask 应用程序,它有一个文本框,允许用户输入域名并使用按钮提交表单(搜索结果显示在搜索框下方的 HTML 中)。我想使用textarea输入框一次支持多个域输入。如何使用按钮在使用文本框输入和基于用户选择的按钮的文本区域之间切换表单(或使用单独的表单)?以及如何从相关框中获取输入并在 python 中处理它?

标签: pythonhtmlpython-3.xflask

解决方案


您可以依靠单行输入并根据jquery需要不断添加新域:

app.py

import flask
app = flask.Flask(__name__)

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

@app.route('/add_domain')
def add_domain():
  _domains = flask.request.args.getlist('domains[]') 
  return flask.jsonify({"success":"true"})
  #do something with domains

get_domains.html中,用于jquery获取所有条目并ajax/add_domain路由通信:

<html>
 <header>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 </header>
 <body>
   <div class='outer'> <!--Used to anchor jquery updates -->
     <div class='input_section'></div>
     <button class='add_domain'>Add domain</button>
   </div>
 </body>
 <script>
  $(document).ready(function(){
   var count = 1;
   var button_count = 0;
   $('.outer').on('click', '.add_domain', function(){
    var new_html = `
    <input type='text' name='domain' id='domain${count}'>
    <div class='spacer' style='height:10px;'></div>
    `
    $('.input_section').append(new_html);
     count += 1;
     if(button_count == 0){
       $('.outer').append('<button class="submit_data" id="submit_stuff">Add all</button>')
       button_count += 1;
     }
    });
     $('.outer').on('click', '.submit_data', function(){
      var results = [];
      for (var i = 1; i < count; i++){
       results.push($('#domain'+i.toString()).val());
      }
      $('.input_section').html('');
      $('#submit_stuff').remove();
      count = 1;
      button_count = 0;
      $.ajax({
      url: "/add_domain",
      type: "get",
      data: {domains: results},
       success: function(response) {
       //pass
      },
       error: function(xhr) {
      //pass
     }
   });
    });
  });
 </script>
</html>

结果:

在此处输入图像描述


推荐阅读