Question

我正在尝试使用一个显示国家/地区信息的简单API。在var apiCall我可以在网址末尾对国家/地区进行硬编码，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();
});

如果不是返回我执行console.log，我会得到一个类似于开头工作的字符串，如果用户输入“england”，那么我会得到“{{ 3}}“

$.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 acall重构为自己的函数，如下所示：

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

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

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

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

2 个答案: