Jquery 如何在函数内多次执行Ajax函数?

Jquery 如何在函数内多次执行Ajax函数?,jquery,ajax,laravel,select,Jquery,Ajax,Laravel,Select,我想使用Ajax填充HTML选择,首先,在开始时,我需要在文档准备好时填充第一个HTML选择 之后,每次用户点击一个按钮,它都会生成一个新的选择,我需要再次填充相同的选择 此选择包含数据库中的多个选项。我试图将Ajax函数放在函数中,以避免编写与文档准备好时相同的Ajax函数 但它不起作用 这是我的代码: function datepicker() { $( ".datepicker" ).datepicker({ dateFormat: "dd-mm-yy" }); $.

我想使用Ajax填充HTML选择,首先,在开始时,我需要在文档准备好时填充第一个HTML选择

之后,每次用户点击一个按钮,它都会生成一个新的选择,我需要再次填充相同的选择

此选择包含数据库中的多个选项。我试图将Ajax函数放在函数中,以避免编写与文档准备好时相同的Ajax函数

但它不起作用

这是我的代码:

function datepicker() {
  $( ".datepicker" ).datepicker({
    dateFormat: "dd-mm-yy"
  });

  $.datepicker.regional['es'] = {
    closeText: 'Cerrar',
    prevText: '< Ant',
    nextText: 'Sig >',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    weekHeader: 'Sm',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };

  $.datepicker.setDefaults($.datepicker.regional['es']);
}


function selectproductos() {
  alert("hola");
  var select = $('.producto');

  $.ajax({
    type: "POST",
    url: "selectproductos",
    data: {
      id: $(this).val(),
      '_token': $('input[name=_token]').val()
    },
    success: function(data) {
      var htmlOptions = [];
      if( data.length ){
        for( item in data ) {
          html = '<option value="' + data[item].id + '">' + data[item].producto + '</option>';
          htmlOptions[htmlOptions.length] = html;
        }

        // here you will empty the pre-existing data from you selectbox and will append the htmlOption created in the loop result
        select.empty().append( htmlOptions.join('') );
      }
    },
    error: function(error) {
      alert(error.responseJSON.message);
    }
  });
}

$(document).ready(function() {
  $( '.remove' ).click(function() {
    $(this).closest('tr').remove();
  });

  $('.select2').select2();
  selectproductos();
  datepicker();

  $("#add").click(function() {
    var lastField = $("#buildyourform tr:last");
    var intId = (lastField && lastField.length && lastField.attr("idx") + 1) || 1;
    var fieldWrapper = $("<tr class=\"fieldwrapper\" id=\"field" + intId + "\"> </tr>");
    fieldWrapper.data("idx", intId);
    var producto = $("<td><select name= \"producto\" placeholder= \"producto\" class=\"fieldname producto\" required=\"required\"><option value=\"\">Selecciona un producto</option></select></td>");
    var presentacion = $("<td><input type=\"text\" name= \"presentacion\" placeholder= \"presentacion\" class=\"fieldname\" /></td>");
    var cantidad = $("<td><input type=\"text\" name= \"cantidad\"  placeholder= \"cantidad\" class=\"fieldname\" /></td>");

    var fechaEntrega = $("<td><input type=\"text\" class=\"datepicker\" ></td>");
    var nota = $("<td><textarea rows=\"2\" cols=\"30\" name=\"nota[]\" id=\"notas\" maxlength=\"255\"></textarea></td>");

    var etiquetado = $("<td><input type=\"checkbox\" name=\"etiquetado\" value=\"Si\"></td>");

    var removeButton = $("<td><input type=\"button\" class=\"remove\" value=\"-\" /></td>");

    removeButton.click(function() {
      $(this).parent().remove();
    });

    fieldWrapper.append(producto);
    fieldWrapper.append(presentacion);
    fieldWrapper.append(cantidad);
    fieldWrapper.append(fechaEntrega);
    fieldWrapper.append(nota);
    fieldWrapper.append(etiquetado);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
    selectproductos();
    datepicker();
  });
});

问题在于您在ajax请求中发送的数据

data: {
  id: $(this).val(),
  '_token': $('input[name=_token]').val()
},
由于您在命名函数selectproductos中移动了请求,$这变得未定义。。。对其应用.val方法会引发错误


将$this更改为$add修复了问题参考:问题下方的注释。

什么不起作用?你有错误吗?只使用一个标记集。。。并将函数放入文档就绪处理程序中。。。重新测试并查看说明。@LouySpatriceBesette再次查看我的代码我做了一些更改,控制台抛出app.js:8356 Uncaught TypeError:无法在jQuery.fn.init.val app.js:8356的selectproductos capturarpedido.js:38的HTMLDocument中读取undefined的属性'toLowerCase'。capturarpedido.js:71在mightThrow app.js:3913在process app.js:3981好的。。。在Ajax数据对象中:id:$this.val,,这当然是未定义的。试用id:$add.val.@louyspatricebesette谢谢现在起作用了!