模板字符串不适用于 AJAX 请求中的 link？

Question

我正在尝试在 AJAX 的帮助下使用 restcountries.eu 加载国家/地区的统计信息。但是当我在 link 上使用模板字符串时，例如xhttp.open('GET', `https://restcountries.eu/rest/v2/alpha/${input}`, true);它找不到 link 并抛出错误 400。错误是这样的：console: GET https://restcountries.eu/rest/v2/alpha/ 400。请问怎么了？！我以前从未见过这样的东西。

等待 5 秒，直到您看到控制台错误。

p.s。我是 AJAX 的初学者，我想用 XHR 来做，反正我知道没有人使用它。我可以使用 async / await 来完成，但就目前而言，XHR.

const countries = () => {
  const input = document.querySelector('#section--input');

  const xhttp = new XMLHttpRequest();

  xhttp.open('GET', `https://restcountries.eu/rest/v2/alpha/${input.value}`, true);

  xhttp.onload = function() {

    if (this.status === 200) {
      const src = JSON.parse(this.responseText);

      console.log(src.flag)
      console.log('Fetch API is working!');
    } else {
      console.log('Fetch API is not working!');
    }
  }

  xhttp.send();

  // Making sure the value is true
  console.log(input);
}

document.querySelector('button').addEventListener('click', countries);

<input type="text" placeholder="Country" id="section--input">
<button type="button" id="button">Click</button>

Answer 1

经过测试，我发现您的代码出现错误 400，这意味着 bad request，回头查看您的代码，我发现了问题所在：\https://restcountries。 eu/rest/v2/alpha/${input}` + inputyou are adding input twice to the URL do:`https://restcountries.eu/rest/v2/alpha/${input}``

const countries = () => {
  const input = document.querySelector('#section--input').value;

  const xhttp = new XMLHttpRequest();

  xhttp.open('GET', `https://restcountries.eu/rest/v2/alpha/${input}`, true);

  xhttp.onload = function() {

    if (this.status === 200) {
      const src = JSON.parse(this.responseText);

      console.log(src.flag)
      console.log('Fetch API is working!');
    } else {
      console.log('Fetch API is not working!');
    }
  }

  xhttp.send();

  // Making sure the value is true
  console.log(input);
}

document.querySelector('button').addEventListener('click', countries);

模板字符串不适用于 AJAX 请求中的 link？

Template string not working with the link in AJAX request?

javascript

ajax

fetch