getJSON，在调用前更改 api 调用 url 变量

Question

我正在尝试使用一个简单的 API 来显示有关国家/地区的信息。在 var apiCall 中，我可以在 url 末尾对国家/地区进行硬编码，并且 getJSON 方法按预期工作并显示信息。

var apiCall = "https://restcountries.eu/rest/v1/name/england";

$.getJSON(apiCall, function(data){

 $("#country").html("Country Name: " + data[0].name + " - " + data[0].alpha2Code);

  $("#capital").html("Capital: " + data[0].capital);

  $("#region").html("Region: " + data[0].region + " - " + data[0].subregion);

  ...

我想在之后添加国家名称，用户输入：

HTML:

<input type="text" placeholder="Country Name" id="inputText"></input>
<button id ="searchButton"> Search </button>

JS

var inputText = $("#inputText");
var apiCall = "https://restcountries.eu/rest/v1/name/";


$("#searchButton").click(function(){
  return apiCall = apiCall + inputText.val();
});

如果我不使用 return，而是执行 console.log，我会得到一个字符串，就像开始时有效的字符串，如果用户键入 "england"，然后我得到“https://restcountries.eu/rest/v1/name/england”

$.getJSON(apiCall, function(data){

 $("#country").html("Country Name: " + data[0].name + " - " + data[0].alpha2Code);

  $("#capital").html("Capital: " + data[0].capital);

  $("#region").html("Region: " + data[0].region + " - " + data[0].subregion);

   ...

我该怎么做才能使 $("#searchButton").click(function(){} 实际上更改 apiCall 的值并使 getJSON 运行再次具有新值？

Answer 1

这应该有效

$("#searchButton").click(function(){
  apiCall = apiCall + inputText.val();
  $.getJSON(apiCall, function(data){ ... });
});

Answer 2

我的建议是将 API 调用重构为它自己的函数，如下所示：

 function refreshCountryDetails (country) {
     var url = (apiCall + country);
     $.getJSON(url, function(data) {
         $("#country").html("Country Na......});
     }
  }

然后当用户点击搜索按钮时，我们只需调用我们的 API 包装器来获取用户输入的国家/地区详细信息 (inputText.val()):

  $("#searchButton").click(function(){
      refreshCountryDetails(inputText.val());
  });

getJSON，在调用前更改 api 调用 url 变量

getJSON, Changing the api call url variable before the call

javascript

getjson