Javascript 如何正确地将表单与AJAX集成以动态添加字段？

我是ajax编程的初学者，请耐心听我说

我想做的是允许用户在单击按钮时添加表单字段，如下所示：

对于主窗体，我有以下代码

class EnrollForm(FlaskForm):
  known_for = StringField('Known for',
    validators=[
      Length(max=LONG_STRING)
    ]
  )

  soc_med_info = FieldList(FormField(SocialMediaForm), min_entries=1)

这是它的子表单/formfield

class SocialMediaForm(Form):
  social_media = SelectField('Where can we find you?', coerce=str)

  other = StringField(validators=[
    Length(max=MEDIUM_STRING)
  ])

  handle = StringField('Handle',
    validators=[
      Length(max=SHORT_STRING)
    ]
  )

  followers = StringField('Followers',
    validators=[
      Length(max=SHORT_STRING),
      Regexp('^\d*[kmKM]$', message='Input number of followers')
    ]
  )

html（enroll.html）

“删除行”功能尚未实现。 预期结果是连续添加字段行，但是，即使重复单击按钮，也只添加一个字段行

我假设这是因为在视图代码中，“add_soc_med（）”；我正在重新初始化注册表单。我要做的是保留“enroll（）”函数中的表单，访问soc\u med\u info字段列表并附加一个条目

我只是不知道该怎么办

我用Jelle van der Zwaag的答案来回答这个问题：

<div class="row">
    <div class="col-lg-12">
        <form method="POST"
        action="{{url_for('user.enroll')}}"
        id="enroll-form">
          {{ form.hidden_tag() }}
            <fieldset class="form-group">
              <legend>
                  Be one of us
              </legend>
              <div class="form-group">
              {{ form.known_for.label(class="form-control-label") }}

              {% if form.known_for.errors %}
                {{ form.known_for(class="form-control form-control-sm is-invalid")}}
                <div class="invalid-feedback">
                  {% for error in form.known_for.errors %}
                      <span>{{ error }}</span>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.known_for(class="form-control form-control-sm")}}
              {%endif%}
            </div>
            <fieldset>
                <legend>
                    Social Media Information
                </legend>
                <span id="platforms">
                  {% include 'pages/user/platforms.html' %}
                </span>
            </fieldset>
          </fieldset>
        </form>
    </div>
</div>

{% for soc_med in form.soc_med_info %}
  <div class="row">
      <div class="col-md-4">
          <div class="form-group">
            {{ soc_med.social_media.label(class="form-control-label") }}

            {% if soc_med.social_media.errors %}
              {{ soc_med.social_media(class="form-control form-control-sm is-invalid")}}
              <div class="invalid-feedback">
                {% for error in form.social_media.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
              </div>
            {% else %}
              {{ soc_med.social_media(class="form-control form-control-sm")}}
            {%endif%}
          </div>
      </div>
      <div class="col-md-4">
          <div class="form-group">
            {{ soc_med.handle.label(class="form-control-label") }}

            {% if soc_med.handle.errors %}
              {{ soc_med.handle(class="form-control form-control-sm is-invalid")}}
              <div class="invalid-feedback">
                {% for error in form.handle.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
              </div>
            {% else %}
              {{ soc_med.handle(class="form-control form-control-sm")}}
            {%endif%}
          </div>
      </div>
      <div class="col-md-2">
          <div class="form-group">
            {{ soc_med.followers.label(class="form-control-label") }}

            {% if soc_med.followers.errors %}
              {{ soc_med.followers(class="form-control form-control-sm is-invalid")}}
              <div class="invalid-feedback">
                {% for error in form.followers.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
              </div>
            {% else %}
              {{ soc_med.followers(class="form-control form-control-sm")}}
            {%endif%}
          </div>
      </div>
      <div class="col-md-2">
          <div class="form-group">
            {% if loop.index == 1 %}
              <button type="button"
              id="add-soc-med-btn">
                  Add Item
              </button>
            {% else %}
              <button type="button">
                  X
              </button>
            {% endif %}
          </div>
      </div>
  </div>
{% endfor %}

<script type="text/javascript">
    $("#add-soc-med-btn").on("click", function(evt){
        evt.preventDefault();
        $.ajax({
          url: "{{url_for('user.add_soc_med')}}",
          type: "POST",
          data: $("#enroll-form").serialize(),
          success: function(data) {
            console.log(data)
            $('#platforms').html(data)
          },
          error: function(xhr, resp, text){
            console.log(xhr, resp, text)
          }
        });
    });
</script>

@user.route('/enroll', methods=['GET', 'POST'])
@login_required
def enroll():
  form = EnrollForm()

  # Initialize form
  for soc_form in form.soc_med_info:
    soc_form.social_media.choices = soc_med_platforms

  if form.validate_on_submit():
    return doEnroll(request, form)

  return render_template('pages/user/enroll.html', form=form)

def doEnroll(request, form):
  pass

@user.route('/enroll/add/social_media', methods=['POST'])
@login_required
def add_soc_med():
  form = EnrollForm(request.form)
  form.soc_med_info.append_entry()
  for soc_form in form.soc_med_info:
    soc_form.social_media.choices = soc_med_platforms

  return render_template('pages/user/platforms.html', form=form)