时间戳

首页 > 解决方案 > 为什么数据在循环中多次显示？

javascript - 为什么数据在循环中多次显示？

问题描述

我一直在尝试建立一种连接到 API 的搜索引擎。它接受用户输入并返回来自 API 的信息。将来应该有一个“动态”数量的输入字段，但目前我正在使用固定数量的五个。循环获取字段数量并使用该输入调用 API 的次数。

我尝试在循环中放置一个常量（即 5），但有趣的是，使用 3 它当然会调用应用程序 3 次但输出 6 个字段，使用 2 它会调用 API 2 次但输出三行所以它似乎它不服从循环而是其他的东西。同时在控制台（带日志）中，我可以看到 API 仅在循环定义的时间被正确调用，所以我相信该$.getJSON级别出现问题

问题是最后创建了一个包含 15 行而不是预期的 5 行的表（每个输入一行）。你认为为什么会这样？

提前致谢

<form name="inputform" method="get" width="50">
  <input type="text" name="field0" id="field0" size="50">
  <input type="text" name="field1" id="field1" size="50">
  <input type="text" name="field2" id="field2" size="50">
  <input type="text" name="field3" id="field3" size="50">
  <input type="text" name="field4" id="field4" size="50">
</form>

<table id="table">
  <tr>
    <th>id</th>
    <th>Name</th>
    <th>Age</th>
    <th>Preference</th>
  </tr>
</table>

<input id="getInfo" type="button" value="Submit" /><br/>

var customURL = "http://apitest.com/test/";
var customURL1 = '';

$('#getInfo').click(function() {
  $('#table tr').not(':first').remove();
  var fields = document.getElementsByTagName('input');
  var table = document.getElementById('table');

  if (localStorage.myJSON !== undefined) {
    var myJSON = JSON.parse(localStorage.myJSON);
  }
  var html = '';
  for (var i = 0; i < elements.length - 1; i++) {
    customURL1 = customURL + document.getElementById('field' + i + '').value;
    console.log(customURL1);

    $.getJSON(customURL1, function(data) {
          console.log(data);
          html += '<tr><td>' + data.sample_list.id + '</td><td>' + data.sample_list.name + '</td><td>' + data.sample_list.age + '</td><td>' + data.sample_list.preference + '</td></tr>';
          $('#table tr').first().after(html);

标签： javascriptjqueryhtmlajax

解决方案

每次收到 AJAX 响应时，都会将响应附加到html变量，然后将其添加到表的第一行之后。由于html变量已经包含来自先前响应的结果，并且它们已经插入到表中，因此您会得到重复项。

无需将新行连接到html，只需将新行直接插入表中即可。

$.getJSON(customURL1, function(data) {
      console.log(data);
      $('#table tr').first().after('<tr><td>' + data.sample_list.id + '</td><td>' + data.sample_list.name + '</td><td>' + data.sample_list.age + '</td><td>' + data.sample_list.preference + '</td></tr>');

推荐阅读