這篇文章主要介紹了jQuery koa2實作簡單的Ajax請求的範例,現在分享給大家,也給大家做個參考。
前言
之前寫Ajax程式碼只管前端的實現,感覺這樣導致自己對Ajax的請求的理解不夠深入,所以寫了這個從前端到後端的Ajax實作小demo,分別實作簡單的GET
和POST
請求,加深下對前後端互動的理解。
技術堆疊
koa2
jQuer
需求
某些邏輯可以直接在前端處理,這裡發給後端處理是為了更好地理解Ajax
請求。
POST
透過填寫編號和姓名並發送POST請求來保存人員信息,當資訊未填寫或填寫不正確時給出格式錯誤的提醒;當資訊填寫正確但編號已存在時給出編號已存在的提醒;當資訊填寫正確且編號不存在時顯示保存成功。
GET
透過填寫編號並發送GET請求來查詢人員信息,當編號未填寫或填寫不正確時給出格式錯誤的提醒;當編號填寫正確且編號已存在時傳回人員資訊;當資訊填寫正確但編號不存在時顯示人員不存在的錯誤提醒。
檔案清單
dist
index.html
#index.js
server.js
router.js
#前端實作
html頁面
#index.html
,簡單的html頁面,透過點擊按鈕發送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> <p> <h1>Hello World</h1> <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> <p id="message"></p> </p> <!-- jQuery实现代码 --> <script src="./index.js"><script> </body> </html>
jQuery發送Ajax請求
發送GET
請求:
var searchButton = $('#search'); var personNumber = $('#person-number').val(); searchButton.click(() => { var number = $('#search-number').val(); $.ajax({ type: 'GET', url: `person/?number=${number}` }) });
#發送POST
請求:
var saveButton = $('#save').click(() => { var number = $('#person-number').val(); var name = $('#person-name').val(); $.ajax({ type: 'POST', url: 'person', dataType: 'json', data: { number: number, name: name } }) });
處理傳回的json資料
#透過ajaxComplete
事件處理傳回的數據,這個事件只能綁定到document
物件上:
// Ajax完成事件 $(document).ajaxComplete(function(event, xhr, settings) { var obj = JSON.parse(xhr.responseText); var data = obj.data; if(obj.success && data['number']){ $('#message').text(`姓名:${data['name']} 编号:${data['number']}`); } else { $('#message').text(data); } });
#後端實作
web伺服器
透過koa2
來實作一個簡單的Web伺服器。 server.js
:
const path = require('path'); const serve = require('koa-static'); const Koa = require('koa'); const koaBody = require('koa-body'); // 解析 multipart、urlencoded和json格式的请求体 const router = require('./router.js'); const app = new Koa(); app.use(serve(path.join(__dirname, './dist'))); // 读取前端静态页面 app.use(koaBody()); // 通过该中间件解析POST请求的请求体才能拿到数据 app.use(router.routes()); app.listen(3000); console.log('listening on port 3000');
#透過路由處理請求
##處理GET 請求,並以
json字串的形式傳回資料。透過
GET請求傳送的查詢參數會以物件字面量的形式保存在
ctx.query屬性中:
router.get('/person', (ctx, next) => { let number = ctx.query.number; let temp = {}; // 判断编号是否存在 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : '编号不存在' ) : '编号格式错误'; temp.success = !!temp.data['number']; ctx.body = JSON.stringify(temp); // 响应请求,发送处理后的信息给客户端 });
處理
POST請求,並以
json字串的形式傳回資料。 POST請求的資料保存在請求的請求體中,需要用
koa-body中間件自動解析後才能透過
ctx.request.body取得請求的資料:
router.post('/person', (ctx, next) => { let query = ctx.request.body; let temp = {}; // 编号必须是数字并且大于0,名字必须存在 if (/^[0-9]+$/.test(query.number) && query.name && parseInt(query.number, 10) > 0) { // 判断编号是否存在 if (!people[query.number]) { // 保存信息 people[query.number] = { number: parseInt(query.number, 10), name: query.name }; temp.success = true; temp.data = '保存成功'; } else { temp.success = false; temp.data = '编号已存在'; } } else { temp.success = false; temp.data = '信息格式错误'; } ctx.body = JSON.stringify(temp); });完整的
router.js:
const Router = require('koa-router'); const router = new Router(); // 初始的人员信息对象,信息从这里储存和读取。 const people = { 1: { number: 1, name: 'Dan Friedell' }, 2: { number: 2, name: 'Anna Matteo' }, 3: { number: 3, name: 'Susan Shand' }, 4: { number: 4, name: 'Bryan Lynn' }, 5: { number: 5, name: 'Mario Ritter' }, }; router.get('/person', (ctx, next) => { let number = ctx.query.number; let temp = {}; // 要返回给客户端的对象,通过success属性判断存取是否成功。 // 判断编号是否存在 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : '编号不存在' ) : '编号格式错误'; temp.success = !!temp.data['number']; ctx.body = JSON.stringify(temp); }); router.post('/person', (ctx, next) => { let query = ctx.request.body; let temp = {}; // 编号必须是数字并且大于0,名字必须存在 if (/^[0-9]+$/.test(query.number) && query.name && parseInt(query.number, 10) > 0) { // 判断编号是否存在 if (!people[query.number]) { // 保存信息 people[query.number] = { number: parseInt(query.number, 10), name: query.name }; temp.success = true; temp.data = '保存成功'; } else { temp.success = false; temp.data = '编号已存在'; } } else { temp.success = false; temp.data = '信息格式错误'; } ctx.body = JSON.stringify(temp); }); module.exports = router;##測試
在控制台輸入
node server.js可以看到伺服器在3000埠運行了,開啟瀏覽器輸入localhost:3000
就可以看到一個簡單的前端頁面:
查詢資料:
儲存數據:
再查詢資料:
#上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
實戰node靜態檔案伺服器的範例程式碼#vue.js或js實作中文A-Z排序的方法vue.js移動數組位置,同時更新視圖的方法##
以上是jQuery+koa2實作簡單的Ajax請求的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!