Bài tập Javascript cơ bản: Ajax – phần 2

Lần trước chúng ta đã đi vào phần 1 cơ bản nhất để viết ajax bằng jQuery
Lần này chúng ta sẽ kết hợp giữa việc lấy data bằng ajax cùng với việc thiết kế giao diện.
API data mà chúng ta sẽ lấy dữ liệu là API về thông tin xoay quanh pokemon: https://pokeapi.co/docs/v2.html/.
Giao diện sẽ thiết kế theo trang sau: https://www.pokemon.com/us/pokedex/

thiết kế pokedex, pokemon

Một số API cần thiết để lấy data

1. API dùng để hiển thị danh sách các Pokemon.

Ví dụ lấy 12 pokemons sẽ dùng API sau: https://pokeapi.co/api/v2/pokemon?limit=12.
Dữ liệu trả về như sau

{
  "count": 964,
  "next": "https://pokeapi.co/api/v2/pokemon?offset=12&limit=12",
  "previous": null,
  "results": [
    { "name": "bulbasaur", "url": "https://pokeapi.co/api/v2/pokemon/1/" },
    { "name": "ivysaur", "url": "https://pokeapi.co/api/v2/pokemon/2/" },
    { "name": "venusaur", "url": "https://pokeapi.co/api/v2/pokemon/3/" },
    { "name": "charmander", "url": "https://pokeapi.co/api/v2/pokemon/4/" },
    { "name": "charmeleon", "url": "https://pokeapi.co/api/v2/pokemon/5/" },
    { "name": "charizard", "url": "https://pokeapi.co/api/v2/pokemon/6/" },
    { "name": "squirtle", "url": "https://pokeapi.co/api/v2/pokemon/7/" },
    { "name": "wartortle", "url": "https://pokeapi.co/api/v2/pokemon/8/" },
    { "name": "blastoise", "url": "https://pokeapi.co/api/v2/pokemon/9/" },
    { "name": "caterpie", "url": "https://pokeapi.co/api/v2/pokemon/10/" },
    { "name": "metapod", "url": "https://pokeapi.co/api/v2/pokemon/11/" },
    { "name": "butterfree", "url": "https://pokeapi.co/api/v2/pokemon/12/" }
  ]
}
  • Từ json của từng pokemon, ta lấy ra id của pokemon ở cuối url.
    Vd, với json sau, pokemon bulbasaur có id là 1.
{ "name": "bulbasaur", "url": "https://pokeapi.co/api/v2/pokemon/1/" }
  • Url ảnh của 1 pokemon dựa trên id tương ứng, ví dụ với id = 1 url ảnh của pokemon sẽ là:
    https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

2. API dùng để lấy thông tin chi tiết của 1 Pokemon.

Ví dụ API thông tin của pokemon có id=12 sẽ là: https://pokeapi.co/api/v2/pokemon/12/ , dữ liệu trả về chi tiết được mô tả ở địa chỉ https://pokeapi.co/docs/v2.html/#pokemon,

Hiển thị thông tin chi tiết của pokemon theo một trong các trang sau, ví dụ hiển thị chi tiết của pokemon bulbasaur có id=1

Xem đáp án tại đây