jQuery ajax请求和html只显示一次数据

Question

美好的一天！

我有一个问题，这是当我点击我的按钮获取ajax请求时这完全正常并在我的选择项目上显示数据但是，当我再次点击按钮获取ajax请求时，这会给出数据（这是但是在我的选择项目上再次显示数据所以，我有两次相同的数据，我该如何解决？我是JS新手，这是我的学校项目哈哈，所以非常感谢你，如果你可以帮助我！ ＆LT; 3

这是我的js代码

  $("#hola").click( function(e) {
  e.preventDefault();
  $.ajax({
    method: 'GET',
    url: '/api/check-estudio/',
    data: {},
    dataType: 'json',
    cache: true,
    success: function(data) {
      for (var i=0; i<data.length; i++) {
        console.log(data[i]);
        var optionHTML = '<option>' + data[i].name + '</option>';
        $(".selectEstudio").append(optionHTML);
      }
    },
    error: function(xhr, resp, text) {
      console.log(xhr, resp, text);
    }
  });

当我第一次完全点击工作并在我的选择框中显示我的数据并显示选项时。

当我关闭de modal并再次单击show modal和ajax request的按钮时，显示两次相同的信息。

感谢你的时间！ ＆LT; 3

Answer 1

这是因为您将相同的数据一遍又一遍地追加到select。您可以先生成option代码，然后将其附加到select的innerhtml，而不是这样做，而不是这样做：

var optionsArray = [];

for (var i = 0; i < data.length; i++) {
    var optionElement = $('<option>', '</option>');
    optionElement.text(data[i]);
    optionsArray.push(optionElement);
}

$(".selectEstudio").append(optionsArray);

为了便于阅读，我可以说避免使用字符串硬编码html标签。只需使用jQuery的选择器创建它们，如下所示：$('<option>', '</option>')。这种方法使您有机会以更优雅和可读的方式扩展元素的属性，并且这里不需要for循环，因为您每次都只是创建一堆元素。只需使用map函数并将元素明确地分配给数组：

var optionsArray = data.map(function(current) {
    var optionElement = $('<option>', '</option>');
    optionElement.text(current);
    return optionElement;
});

$(".selectEstudio").append(optionsArray);

它的可读性很好吗？

Answer 2

而不是.append()使用.html()以及位代码增强功能： -

var optionHTML =''; // define variable
for (var i=0; i<data.length; i++) {
    optionHTML += '<option>' + data[i].name + '</option>'; // add all options
}
$(".selectEstudio").html(optionHTML); // append in last not inside loop one-by-one

或者您可以先选择empty()选择框，然后重新添加： -

var optionHTML ='';
 $(".selectEstudio").empty();
for (var i=0; i<data.length; i++) {
    optionHTML += '<option>' + data[i].name + '</option>';
}
$(".selectEstudio").html(optionHTML);