前言

之前寫Ajax代碼只管前端的實現，感覺這樣導致自己對Ajax的請求的理解不夠深入，所以寫了這個從前端到后端的Ajax實現小demo，分別實現簡單的GET和POST請求，加深下對前后端交互的理解。

技術棧

1. koa2
2. jQuer

需求

某些邏輯可以直接在前端處理，這里發給后端處理是為了更好地理解Ajax請求。

POST

通過填寫編號和姓名并發送POST請求來保存人員信息，當信息未填寫或填寫不正確時給出格式錯誤的提醒；當信息填寫正確但編號已存在時給出編號已存在的提醒；當信息填寫正確且編號不存在時顯示保存成功。

GET

通過填寫編號并發送GET請求來查詢人員信息，當編號未填寫或填寫不正確時給出格式錯誤的提醒；當編號填寫正確且編號已存在時返回人員信息；當信息填寫正確但編號不存在時顯示人員不存在的錯誤提醒。

文件列表

1. dist
   1. index.html
   2. index.js
2. server.js
3. router.js

前端實現

html頁面

index.html，簡單的html頁面，通過點擊按鈕發送json格式的Ajax請求:

 
 
 


 

 
Hello World
 編號
 
 姓名
 
 保存信息
 編號
 
 查詢信息