參數的網址？ jQuery，Ajax，JSON

Question

創建一個帶有表和按鈕的html頁面。 單擊該按鈕時，將顯示“星球大戰” api中前10個行星的結果。 表中的信息是：

行星名稱人口氣候重力應該有一個函數可以調用行星的api（應該有一個參數的URL）應該有一個函數可以將行星打印到表格中** API URL：** https：/ /swapi.co/api/planets/?page=1

這是我的答案，但我不知道如何將網址作為參數傳遞...幫助？！

$(document).ready(function () {

  let btn = $(".btn")
  btn.on("click", function bla () {
    $.ajax({
        url: "https://swapi.co/api/planets/?page=1",
        success: function (response) {
            let planetsObj = response;
            console.log(planetsObj)
            for (let i = 0; i < planetsObj.results.length; i++) {
                let firstTen = `<tr>  <td> ${planetsObj.results[i].name}</td> <td>${planetsObj.results[i].population} </td>  <td>${planetsObj.results[i].climate}</td> <td>${planetsObj.results[i].gravity}</td></tr>`
                $(".table").append(firstTen)
            }
        }
    })
  })

})

Answer 1

您可以定義一個接受參數的函數，然后從click listener回調函數上的按鈕進行調用。

這是一個例子：

$(".btn").on("click", function() {
  getPlanets("https://swapi.co/api/planets/?page=1")
});

function getPlanets(URL) {
  $.ajax({
    url: URL,
    success: function (response) {
        ...  
      }
    }
  });
}

Answer 2

我不完全理解您的問題，但希望它能對您有所幫助。 我舉一個例子：

注意：從ES6開始，您可以使用模板文字

 $(document).ready(function () { let btn = $(".btn"); let btn_search = $("#btn_search"); let table = $(".table"); btn.on("click", function (e) { const page = $(this).attr('data-page'); const searchText = ""; callToApi(page, searchText); }); btn_search.on("click", function (e) { const searchText = $("#search").val(); const page = 1; // default value table.empty(); // clean table callToApi(page, searchText); }); function callToApi(page, searchText) { $.ajax({ // Template literals url: `https://swapi.co/api/planets/?page=${page}&search=${searchText}`, success: function (response) { let planetsObj = response; for (let i = 0; i < planetsObj.results.length; i++) { let firstTen = `<tr> <td> ${planetsObj.results[i].name}</td> <td>${planetsObj.results[i].population} </td> <td>${planetsObj.results[i].climate}</td> <td>${planetsObj.results[i].gravity}</td></tr>` table.append(firstTen) } } }) } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <label>Search:</label> <input id="search" /> <button id="btn_search"> Search </button> <table class="table"> </table> <br/> <br/> <button class="btn" data-page="1"> Load Page 1 </button> <button class="btn" data-page="2"> Load Page 2 </button>