Question

我尝试使用材质设计精简创建一个烧瓶应用，用户可以从表单中添加一堆芯片到列表，提交表单，然后使用列表中的项目渲染新模板。但是，在点击提交按钮并将其发送到我的服务器时，我很难弄清楚如何提交芯片的值。

这是一个简单的Hello Names示例：

Flask App

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('hello.html')

@app.route('/names', methods=['POST','GET'])
def say_hello():
    names = request.json
    return render_template('names.html', names)

if __name__ == "__main__":
    app.run()

hello.html的

 <main class="mdl-layout__content">
    <div class="page-content" "mdl-grid">
      <form id="name_inputs">
        <div id="name-inputs" class="mdl-cell--4-offset mdl-cell mdl-cell--4-col">
          <h4>Who do you want to say hello to?</h4>
          <div class="mdl-textfield mdl-js-textfield" id="name-div">
            <input class="mdl-textfield__input" type="text" id="name"/>
            <label class="mdl-textfield__label" for="name">Name</label>
          </div>
          <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="name-add">
            Add
          </button>
          <ul id='name-list' style="padding: 0;">
            <!-- Open list for name -->
          </ul>
          <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="submit">
            Say Hello
          </button>
        </div>
      </form>
    </div>
  </main>

芯片jQuery

<script>
   $(document).ready(function(){
      $("#name-add").click(function(){
        var name = $('#name').val();
        if (name != '') {
          var names_chip = '<li id="name-chips" style="list-style:none;">' +
                                '<span class="mdl-chip mdl-chip--deletable">' +
                                    '<span class="mdl-chip__text" style="font-size:16px;">' + name + '</span>' +
                                    '<button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>' +
                                '</span>' +
                              '</li>';
          $("#name-list").append(names_chip);
          $('#name').val('');
        }
      });
   });

   $(document).on('click','.mdl-chip__action',function(){
        $(this).parent().remove();
     });
  </script>

我一直在调查ajax，但是如果我点击提交按钮，它就会设置为“ajax”，但是它甚至无法设置#j; names.html＆＃39;致电＆＃39; / names＆＃39; URL。

Flask从动态表单

0 个答案: