回想當年剛接觸前端，Ajax 真的碰一次就跪一次，當時不懂后端，不知道 api 是什么東東，也沒有后端小伙伴寫介面給我測驗，
本文整理了我用過的幾個 免費的在線api介面，而且不需要處理跨域等問題，
希望能給剛入門的前端小白在學習 Ajax 時提供一點幫助，
本文列舉的在線介面包括：文本 和 圖片，
本文案例都是使用 postman 進行測驗的，因為我懶得自己寫 Ajax 代碼，
如果本文對您有幫助，請幫我點個贊唄??
一、{JSON} Placeholder
『JSONPlaceholder』 提供用于測驗的免費API，
JSONPlaceholder 使用方式非常簡單，提供了 GET、POST、PUT、PATCH、DELETE 幾個請求方法，
還提供分頁查詢、具體id查詢等功能，
例：獲取100篇文章資料（GET）
回傳100條資料，每條內容都有帖子 ID、發貼人 ID、標題、以及簡介，
http://jsonplaceholder.typicode.com/posts
例：根據文章ID獲取文章資料（GET）
根據文章 ID 獲取指定文章的資料，
回傳：文章 ID、發貼人 ID、標題、以及內容，
http://jsonplaceholder.typicode.com/posts/2
本例傳入的 ID 為2，回傳 ID 為2的資料，
例：添加文章（POST）
使用 POST 發送一篇文章，發送成功會回傳一個文章 ID 回來，
http://jsonplaceholder.typicode.com/posts
其他介面（自己試試吧）
帖子介面：
- 獲取帖子串列：http://jsonplaceholder.typicode.com/posts
- 根據帖子ID獲取詳情：https://jsonplaceholder.typicode.com/posts/1
- 獲取某個用戶所有的帖子：http://jsonplaceholder.typicode.com/posts?userId=5
- 獲取帖子所有的評論：https://jsonplaceholder.typicode.com/posts/1/comments
評論介面
- 獲取評論串列：http://jsonplaceholder.typicode.com/comments
- 獲取某個帖子的所有評論：http://jsonplaceholder.typicode.com/comments?postId=4
專輯介面：
- 獲取專輯串列：http://jsonplaceholder.typicode.com/albums
- 根據專輯ID獲取詳情：http://jsonplaceholder.typicode.com/albums/6
- 獲取某個用戶所有專輯：http://jsonplaceholder.typicode.com/albums?userId=9
待辦事宜介面：
- 獲取待辦事宜串列：http://jsonplaceholder.typicode.com/todos
- 根據待辦ID獲取詳情：http://jsonplaceholder.typicode.com/todos/6
- 獲取某個用戶所有待辦事宜：http://jsonplaceholder.typicode.com/todos?userId=9
用戶介面：
- 獲取用戶串列：http://jsonplaceholder.typicode.com/users
- 根據用戶ID獲取詳情：http://jsonplaceholder.typicode.com/users/5
照片介面：
- 獲取照片串列：http://jsonplaceholder.typicode.com/photos
- 根據照片ID獲取詳情：http://jsonplaceholder.typicode.com/photos/8
二、貓奴福利介面
『The Cat API - Cats as a Service.』 會回傳貓的圖片，絕對是福利，
使用方法可以看 『檔案』 ，里面包括貓的 “按品種搜索”、“按類別搜索”、“分頁搜索”、“圖片上傳”、“影像分析”等介面，可以對照檔案使用，
例：隨機獲取1張貓圖（GET）
每次請求都會隨機回傳一張貓的圖片，
https://api.thecatapi.com/v1/images/search?limit=1
其他介面的使用都比較簡單，『官方檔案』 都講得很明白的，可以自己用 postman 測一下，
三、狗子介面
『Dog API』 提供了狗子的圖片，官網的首頁第一眼看到的 api 就可以隨機獲得一張狗子照片，非常有趣，
例：隨機回傳一張狗子照片（GET）
https://dog.ceo/api/breeds/image/random
其他介面的用法也好簡單，詳情可看 『狗子官方檔案』
四、隨機圖片介面
『Lorem Picsum』 可以隨機回傳一張照片，還可以指定照片的尺寸，
Lorem Picsum 提供的介面回傳的是一個圖片資源，而且是隨機回傳的，
可以直接放在 <img> 標簽的 src 屬性內使用，
例：回傳 寬和高都是200px 的圖片（GET）
https://picsum.photos/200
例：比如想要獲取 寬200，高300 的圖片（GET）
如果寬高尺寸不同，可以自己設定，
https://picsum.photos/200/300
五、其他介面
前面4個是我用得最多的測驗平臺，接下來這些是我用得比較少，但知道有這回事，有需要的話可以自己測測，
愛奇藝介面
https://cache.video.iqiyi.com/jp/avlist/{片源id}/{頁碼}/
例：用海賊王的片源id（GET）
https://cache.video.iqiyi.com/jp/avlist/202861101/1/
可以猜到：
vpic：每集的封面shortTitle：集數vt：本集的名稱vid：視頻idvur：視頻播放地址
其他欄位自己猜吧，我懶~
物流介面
http://www.kuaidi100.com/query?type=快遞公司代號&postid=快遞單號
快遞公司編碼：
-
申通：
shentong -
EMS：
ems -
順豐：
shunfeng -
圓通：
yuantong -
中通：
zhongtong -
韻達：
yunda -
天天：
tiantian -
匯通：
huitongkuaidi -
全峰：
quanfengkuaidi -
德邦：
debangwuliu -
宅急送：
zhaijisong
淘寶商品介面
http://suggest.taobao.com/sug?code=utf-8&q=商品關鍵字&callback=cb
callback 是回呼函式設定
點贊 + 關注 + 收藏 = 學會了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498881.html
標籤：JavaScript
上一篇：webpack版本不一至導致的 Uncaught TypeError:n is not a function at window.webpackJsonp 錯誤
下一篇：獲取元素的寬高的三種辦法