如何更好地编写此代码并使其相似？ Javascript

Question

您好，我使用 ajax 编写了一些代码，我正在玩，但我不知道如何减少代码以使其有用，有什么办法吗？ 我已经多次使用过这个.done，而且我肯定可以使用一次 如果你可以给我写一个类似的代码但要减少？ 我什至不知道这是否是使用 ajax 的最佳方式？ 我什至不知道这是否是使用 ajax 的最佳方式？ 我什至不知道这是否是使用 ajax 的最佳方式？

var tbody = $('.tbody');

$('.item').on('click', function() {
  $(this).addClass('active').siblings().removeClass('active');
});

$('li a').on('click', function(e) {
  e.preventDefault();
  var link = $(this).attr('href');
  if (link == "books") {
    $.ajax({
      url : "https://mysafeinfo.com/api/data?list=bestnovels1&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L",
      dataType : "json"
    })
    .done(function (res) {
      $('.page-header').html(link);
      var text1 = '';
      for(prop in res[0]) {
        text1 += '<th>'+prop+'</th>'
      }
      thead.html(text1);
      var text = '';
      for (var i = 0; i < res.length; i++) {
        text += '<tr>';
      for(prop in res[i]) {
        text += '<td>'+res[i][prop]+'</td>'
      }
        text += '</tr>';
      }
      tbody.html(text);
      
    });
  }else if(link == "novels") {
    $.ajax({
      url : "https://mysafeinfo.com/api/data?list=bestnovels7&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L",
      dataType : "json"
    })
    .done(function (res) {
      $('.page-header').html(link);
      var text1 = '';
      for(prop in res[0]) {
        text1 += '<th>'+prop+'</th>'
      }
      thead.html(text1);
      var text = '';
      for (var i = 0; i < res.length; i++) {
        text += '<tr>';
      for(prop in res[i]) {
        text += '<td>'+res[i][prop]+'</td>'
      }
        text += '</tr>';
      }
      tbody.html(text);
      
    });

  }else if(link == "actors") {
    $.ajax({
      url : "https://mysafeinfo.com/api/data?list=bestactors1&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L",
      dataType : "json"
    })
    .done(function (res) {
      $('.page-header').html(link);
      var text1 = '';
      for(prop in res[0]) {
        text1 += '<th>'+prop+'</th>'
      }
      thead.html(text1);
      var text = '';
      for (var i = 0; i < res.length; i++) {
        text += '<tr>';
      for(prop in res[i]) {
        text += '<td>'+res[i][prop]+'</td>'
      }
        text += '</tr>';
      }
      tbody.html(text);
      
    });
  }

})

Answer 1

没那么难做……

一些文档：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement#methods
https://developer.mozilla.org/en-US/docs/Web/API/fetch#examples

const urls =
  { books  : 'https://mysafeinfo.com/api/data?list=bestnovels7&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L'
  , novels : 'https://mysafeinfo.com/api/data?list=bestnovels1&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L'
  , actors : 'https://mysafeinfo.com/api/data?list=bestactors1&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L'
  }
mySelect.oninput =_=>
  {
  myTable.innerHTML = ''         // clear table
 
  fetch( urls[mySelect.value] )  // make server request with chosed url
  .then(resp=> resp.json() )    // on server ready ask for json data
  .then(data=>
    {
    let Names = Object.keys(data[0])  // get columns names
    data.forEach( row =>             // proceed data's rows into Table 
      {
      let newRow = myTable.insertRow()
      Names.forEach(name => newRow.insertCell().textContent = row[name])
      })
    let newRowHead = myTable.createTHead().insertRow()    // chaining
    Names.forEach(name => newRowHead.insertCell().outerHTML = `<th>${name}</th>` )    
                                                 // change <td> to <th>
    })
  }

table {
  font             : 14px Arial, Helvetica, sans-serif;
  white-space      : nowrap;
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em 0 0 0; 
  }
td { padding: .3em .6em; background-color : whitesmoke;     } 
th { padding: .3em .6em; background-color : lightsteelblue; }

<select id="mySelect">
  <option value="" selected disabled >pick one...</option>
  <option value="books" >books</option>
  <option value="novels" >novels</option>
  <option value="actors">actors</option>
</select>

<table id="myTable"></table>

Answer 2

由于您的 done 函数是相同的，您可以将代码移动到单个函数并在每个 .done 中运行它，例如：

.done(res => buildTable(link, res));

进一步你可以看到每个 Ajax 都是相同的（几乎）。只有 url 不同，所以你可以这样写：

function loadTable(link, url) {
  $.ajax({
    url: url,
    dataType: "json"
  })
    .done(function (res) {
      $('.page-header').html(link);
      var text1 = '';
      for (prop in res[0]) {
        text1 += '<th>' + prop + '</th>'
      }
      thead.html(text1);
      var text = '';
      for (var i = 0; i < res.length; i++) {
        text += '<tr>';
        for (prop in res[i]) {
          text += '<td>' + res[i][prop] + '</td>'
        }
        text += '</tr>';
      }
      tbody.html(text);
    });
}

$('li a').on('click', function(e) {
  e.preventDefault();
  const link = $(this).attr('href');
  const links = {
    books: "https://mysafeinfo.com/api/data?list=bestnovels1&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L",
    novels: "https://mysafeinfo.com/api/data?list=bestnovels7&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L",
    actors: "https://mysafeinfo.com/api/data?list=bestactors1&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L",
  }
  loadTable(link, links[link]);
}

网址也相似，因此您可以仅将不同之处放在地图上：

const links = {
    books: "novels1",
    novels: "novels7",
    actors: "actors1",
  }
loadTable(link, `https://mysafeinfo.com/api/data?list=best${links[link]}&format=json&case=default&token=XH5nFfa1MsMqUNaZ3716yRM2WaJjIT6L`);