如何更好地撰寫此代碼并使其相似？Javascript

嗨，我使用 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);
      
    });
  }

})

uj5u.com熱心網友回復：

沒那么難做...

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] )
  .then(resp=> resp.json() )
  .then(data=>
    {
    let Names = Object.keys(data[0])
    data.forEach((row,i) => 
      {
      let newRow = myTable.insertRow()
      Names.forEach(name => newRow.insertCell().textContent = row[name])
      })
    let newRowHead = myTable.createTHead().insertRow()
    Names.forEach(name => newRowHead.insertCell().outerHTML = `<th>${name}</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>

uj5u.com熱心網友回復：

由于您的 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]);
}

url 也很相似，因此您只能將差異放在地圖上：

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`);

標籤：

上一篇：如何使用session$sendCustomMessage發送HTML代碼？

下一篇：Woocommerce在按鈕單擊時打開單個產品選項卡