jQuery+koa2實(shí)現(xiàn)簡單的Ajax請求的示例-創(chuàng)新互聯(lián)

前言

創(chuàng)新互聯(lián)專注于蘇仙企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站定制開發(fā)。蘇仙網(wǎng)站建設(shè)公司,為蘇仙等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

技術(shù)棧

1. koa2
2. jQuer

需求

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

POST

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

GET

通過填寫編號并發(fā)送GET請求來查詢?nèi)藛T信息，當(dāng)編號未填寫或填寫不正確時給出格式錯誤的提醒；當(dāng)編號填寫正確且編號已存在時返回人員信息；當(dāng)信息填寫正確但編號不存在時顯示人員不存在的錯誤提醒。

文件列表

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

前端實(shí)現(xiàn)

html頁面

index.html，簡單的html頁面，通過點(diǎn)擊按鈕發(fā)送json格式的Ajax請求:

 
 
 


 

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

 

 

 
 
 
<li id="o2oqk"></li>