Python Flask Web 应用程序 - 多行输入选项答案

【问题标题】：Python Flask Web Application - Multi-line Input OptionPython Flask Web 应用程序 - 多行输入选项
【发布时间】：2018-08-01 13:22:36
【问题描述】：

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

【问题讨论】：

与其在两者之间切换，不如使用 TextArea 元素并计算其中有多少个域可能更容易。另外，这个问题可能是部分重复：stackoverflow.com/questions/11556958/…

标签： python html python-3.x flask

【解决方案1】：

您可以依靠单行输入并使用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>

结果：

【讨论】：