时间戳

首页 > 解决方案 > 模板字符串不适用于 AJAX 请求中的链接？

javascript - 模板字符串不适用于 AJAX 请求中的链接？

问题描述

我正在尝试在AJAX 的帮助下使用restcountries.eu加载国家/地区的静态数据。但是当我在链接上使用模板字符串时，例如xhttp.open('GET', `https://restcountries.eu/rest/v2/alpha/${input}`, true)；它找不到链接并抛出错误400。错误是这样的：console: GET https://restcountries.eu/rest/v2/alpha/ 400。我想知道怎么了？！我以前从未见过这样的事情。

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

ps 我是 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>

标签： javascriptajaxfetch

解决方案

经过测试，我发现您的代码给出了错误400，这意味着 a bad request，回顾您的代码，我可以看到问题：\https://restcountries.eu/rest/v2/alpha/${input}` + input you 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);

推荐阅读