代码之家 › 专栏 › 技术社区 › mightycode Newton

使用Ajax调用调用api

javascript

mightycode Newton · 技术社区 · 4 年前

我尝试调用一个外部api资源。

这是javascript代码:

const getCountry = function(country){ 

const btn = document.querySelector(".btn-country");
const countriesContainer = document.querySelector(".countries");

const request = new XMLHttpRequest();
request.open("GET", `https://restcountries.com/v3.1/name/${country}`);
request.send();

//console.log(request.responseText);

request.addEventListener("load", function () {
  //console.log(this.responseText);
  const [data] = JSON.parse(this.responseText);
 // console.log(data);

  const html = `
  <article class="country">
  <img class="country__img" src="${data.flags}" />
  <div class="country__data">
    <h3 class="country__name">${data.name}</h3>
    <h4 class="country__region">${data.region}</h4>
    <p class="country__row"><span>ð«</span>${(
      +data.population / 1000000
    ).toFixed(1)} people</p>
    <p class="country__row"><span>ð£ï¸</span>${data.languages}</p>
    <p class="country__row"><span>ð°</span>${data.currencies}</p>
  </div>
</article>
    `;
  countriesContainer.insertAdjacentHTML("beforeend", html);
  countriesContainer.style.opacity = 1;
});
}


getCountry('portugal');

这是html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <script defer src="./restCountries.js"></script>
    <title>Asynchronous JavaScript</title>
  </head>
  <body>
    <main class="container">
      <div class="countries">
      
      </div>
      <!-- <button class="btn-country">Where am I?</button> -->
      <div class="images"></div>
    </main>
  </body>
</html>

我看到数据是在chrome工具中返回的。

但我仍然会遇到这样的错误:

[object%20Object]:1 GET http://127.0.0.1:5500/jquery/Algorithms/[object%20Object] 404 (Not Found)

那么我需要改变什么呢?

非常感谢。

0 回复 | 直到 4 年前

mightycode Newton 4 年前

神圣的我很棒。

所以这是有效的:

  request.open('GET', `https://restcountries.com/v2/name/${country}`);

感谢您的帮助:)

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前