jQuery+koa2實現(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è)計,全程項目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

技術(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

前端實現(xiàn)

html頁面

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
 <div>
 <h2>Hello World</h2>
 <label for="person-number">編號</label>
 <input type="text" id="person-number">
 <label for="person-name">姓名</label>
 <input type="text" id="person-name">
 <button id="save">保存信息</button>
 <label for="search-number">編號</label>
 <input type="text" id="search-number">
 <button id="search">查詢信息</button>
 <br>
 <br>
 <div id="message"></div>
 </div>
 <!-- jQuery實現(xiàn)代碼 -->
 <script src="./index.js"><script>
</body>
</html>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱:jQuery+koa2實現(xiàn)簡單的Ajax請求的示例-創(chuàng)新互聯(lián)
URL網(wǎng)址:http://muchs.cn/article8/dhshop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、ChatGPT營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、App開發(fā)手機網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)