Question

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

Answer 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>

结果：

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

1 个答案: