Jquery 从动态表单渲染新模板

我正在尝试使用material design lite创建一个flask应用程序，用户可以从表单向列表中添加一堆芯片，提交表单，然后使用列表中的项目呈现一个新模板。然而，当点击提交按钮并将其发送到我的服务器时，我很难弄清楚如何提交芯片的值

下面是一个简单的Hello Names示例：

烧瓶应用程序

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>

$（文档）.ready（函数（）{
$（“#名称添加”）。单击（函数（）{
var name=$（'#name'）.val（）；
如果（名称！=''）{
var names_chip='
”+
'' +
''+姓名+''的+
“取消”+
'' +
“
”；
$（“#姓名列表”）。追加（姓名#芯片）；
$（'#name'）.val（''）；
}
});
});
$（文档）.on（'单击'，'.mdl-chip______行动'，函数（））{
$（this.parent（）.remove（）；
});

---

我一直在研究ajax，但甚至无法设置它，如果我单击submit按钮，它会通过调用'/names'URL呈现'names.html'

你的问题到底在哪里？有stacktraces吗？我没有遇到任何实际错误，这只是一个使用ajax将用户重定向到新路由的问题。我认为我没有正确地使用ajax，我应该使用它在用户所在的页面上返回新数据。最后，我创建了一个新的jquery函数，当用户提交表单时，该函数只是将芯片作为输入添加到表单中。有点老套，但它能用