通过 AJAX 和 JQUERY 动态添加输入表单

Question

我现在遇到的问题是，我现在要附加的内容也只是在主 JavaScript 文件中创建它。

有没有一种方法可以将此内容放入其他 HTML 文件中，然后在 JavaScript 文件中使用 AJAX 调用它，并可能在循环中附加此内容以附加从选择输入标签中选择的次数？

这里是选择输入代码：

<label for="beneficiarios">Cantidad de beneficiarios</label>
<select name="beneficiarios" id="beneficiarios">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

这是我要附加的内容：

<div class="row beneficiario-info">
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="bene-nombreyapellido">Nombre y Apellido</label>
      <input type="text" name="bene-nombreyapellido" id="bene-nombreyapellido" class="form-control">
    </div>
    <!-- form group -->
    <div class="form-group w-75">
      <label for="bene-ci-numero">Cedula de identidad</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <select name="bene-ci-tipo" id="bene-ci-tipo" class="custom-select">
            <option value="VE">V</option>
            <option value="EX">E</option>
          </select>
        </div>
        <!-- cedula tipo prepend -->
        <input type="text" name="bene-ci-numero" id="bene-ci-numero" class="form-control" maxlength="8">
      </div>
      <!-- input group -->
    </div>
    <!-- form group -->
  </div>
  <!-- col -->
  <div class="col-md-6">
    <div class="form-group w-75">
      <label for="parentezco">Parentezco</label>
      <select name="parentezco" id="parentezco" class="custom-select">
        <option value="">---------</option>
        <option value="hijo">Hijo</option>
        <option value="padre">Padre</option>
        <option value="hermano">Hermano o Hermana</option>
        <option value="conyugue">Conyugue</option>
      </select>
    </div>
    <div class="form-group">
      <label for="servicioadicional">Servicios Adicionales</label>
      <select name="servicios_beneficiario" class="custom-select" id="servicios_beneficiario" multiple="multiple">
        <option value="medico">Médico</option>
        <option value="odontologico">Odontológico</option>
        <option value="funerario">Funerario</option>
        <option value="vial">Víal</option>
      </select>
    </div>
  </div>
  <!-- col -->
</div>
<!-- row beneficiario -->

这是 JavaScript 代码：

var number = 0;

$('#ctd-beneficiarios').on('change', function() {
  numero = $(this).val();
  beneficiarios_wrapper.html('');

  for (var i = 0; i < numero; i++) {

  }
}); 

beneficiarios_wrapper 是我要将内容附加到的 div。

Answer 1

与其将其存储在单独的文件中并通过 AJAX 检索它，不如使用 像这样的隐藏模板：

$main = $('#main');
for(var i=0;i<5;i++){
  var $template = $('.template').clone();
  $template.removeClass('template');
  $template.find('.mainText').text("Template "+i);
  $main.append($template);
  $template.show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="template" style="display:none;">
    <span class ="mainText"></span>
  </div>
</div>

或者，正如 J. Titus 所建议的那样：

$main = $('#main');
for(var i=0;i<5;i++){
  var template = document.getElementById('template').innerHTML;
  var $template = $(template)
  $template.find('.mainText').text('Template '+i)
  $main.append($template);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="template" type="text/template">
    <div>
      <div class="test">
      <span class="mainText">test</span>
      </div>
    </div>
</script>
<div id="main">
</div>