javascript - 带有用户输入的 API 查询

Question

我有一个表单，用户可以在其中输入城市名称，我想进行 API 调用并获取该城市的天气结果，然后将其显示在控制台中。

我收到一个错误，因为出于某种原因，保存 input.value 的变量没有连接到字符串中。

代码如下:

var request;
var input1 = document.getElementById('city');
var api = 'https://api.openweathermap.org/data/2.5/weather?q=';
var apikey = '&APPID=433b12b793d7ebc17989745c069a540b';
var sum = api + input1.value + apikey;

function myFunction() {

  request = new XMLHttpRequest();

  request.open('GET', sum, true);
  request.onload = function() {

    var data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
      console.log(data);
    } else {
      console.log(input1.value);
    }
  }

  request.send();
}
myFunction(input1.value);

<input id='city' value='San Francisco'>

感谢您的帮助!

Answer 1

您的代码没问题，您只需要将所有内容放入函数中即可。

 <script>
    function myFunction() {

        var request;
        var input1 = document.getElementById('city');
        var api = 'https://api.openweathermap.org/data/2.5/weather?q=';
        var apikey =
            '&APPID=433b12b793d7ebc17989745c069a540b';
        var sum = api + input1.value + apikey;

        request = new XMLHttpRequest();

        request.open('GET', sum, true);
        request.onload = function () {

            var data = JSON.parse(this.response);
            if (request.status >= 200 && request.status < 400) {
                console.log(data);
            } else {
                console.log(input1.value);
            }
        }

        request.send();
    }
</script>