jQuery+koa2實(shí)現(xiàn)簡(jiǎn)單的Ajax請(qǐng)求的示例

2019-11-19 14:13:37

字體：大中小

供稿：網(wǎng)友

前言

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

技術(shù)棧

koa2
jQuer

需求

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

POST

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

GET

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

文件列表

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

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

html頁(yè)面

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

<!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> <h1>Hello World</h1> <label for="person-number">編號(hào)</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">編號(hào)</label> <input type="text" id="search-number"> <button id="search">查詢信息</button> <br> <br> <div id="message"></div> </div> <!-- jQuery實(shí)現(xiàn)代碼 --> <script src="./index.js"><script></body></html>

jQuery發(fā)送Ajax請(qǐng)求

發(fā)送GET請(qǐng)求：

var searchButton = $('#search');var personNumber = $('#person-number').val();searchButton.click(() => { var number = $('#search-number').val(); $.ajax({ type: 'GET', url: `person/?number=${number}` })});

發(fā)送POST請(qǐng)求：

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數(shù)據(jù)

通過ajaxComplete事件處理返回的數(shù)據(jù)，這個(gè)事件只能綁定到document對(duì)象上：

// 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']} 編號(hào)：${data['number']}`); } else { $('#message').text(data); }});

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

web服務(wù)器

通過koa2來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Web服務(wù)器。server.js：

const path = require('path');const serve = require('koa-static');const Koa = require('koa');const koaBody = require('koa-body'); // 解析 multipart、urlencoded和json格式的請(qǐng)求體const router = require('./router.js');const app = new Koa();app.use(serve(path.join(__dirname, './dist'))); // 讀取前端靜態(tài)頁(yè)面app.use(koaBody()); // 通過該中間件解析POST請(qǐng)求的請(qǐng)求體才能拿到數(shù)據(jù)app.use(router.routes());app.listen(3000);console.log('listening on port 3000');

通過路由處理請(qǐng)求

處理GET請(qǐng)求，并以json字符串的形式返回?cái)?shù)據(jù)。通過GET請(qǐng)求發(fā)送的查詢參數(shù)會(huì)以對(duì)象字面量的形式保存在ctx.query屬性中：

router.get('/person', (ctx, next) => { let number = ctx.query.number; let temp = {}; // 判斷編號(hào)是否存在 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : '編號(hào)不存在' ) : '編號(hào)格式錯(cuò)誤'; temp.success = !!temp.data['number']; ctx.body = JSON.stringify(temp); // 響應(yīng)請(qǐng)求，發(fā)送處理后的信息給客戶端});

處理POST請(qǐng)求，并以json字符串的形式返回?cái)?shù)據(jù)。POST請(qǐng)求的數(shù)據(jù)保存在請(qǐng)求的請(qǐng)求體中，需要用koa-body中間件自動(dòng)解析后才能通過ctx.request.body獲取請(qǐng)求的數(shù)據(jù)：

router.post('/person', (ctx, next) => { let query = ctx.request.body; let temp = {}; // 編號(hào)必須是數(shù)字并且大于0，名字必須存在 if (/^[0-9]+$/.test(query.number) && query.name && parseInt(query.number, 10) > 0) { // 判斷編號(hào)是否存在 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 = '編號(hào)已存在'; } } else { temp.success = false; temp.data = '信息格式錯(cuò)誤'; } ctx.body = JSON.stringify(temp);});

完整的router.js:

const Router = require('koa-router');const router = new Router();// 初始的人員信息對(duì)象，信息從這里儲(chǔ)存和讀取。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 = {}; // 要返回給客戶端的對(duì)象，通過success屬性判斷存取是否成功。 // 判斷編號(hào)是否存在 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : '編號(hào)不存在' ) : '編號(hào)格式錯(cuò)誤'; temp.success = !!temp.data['number']; ctx.body = JSON.stringify(temp);});router.post('/person', (ctx, next) => { let query = ctx.request.body; let temp = {}; // 編號(hào)必須是數(shù)字并且大于0，名字必須存在 if (/^[0-9]+$/.test(query.number) && query.name && parseInt(query.number, 10) > 0) { // 判斷編號(hào)是否存在 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 = '編號(hào)已存在'; } } else { temp.success = false; temp.data = '信息格式錯(cuò)誤'; } ctx.body = JSON.stringify(temp);});module.exports = router;

測(cè)試

在控制臺(tái)輸入node server.js可以看到服務(wù)器在3000端口運(yùn)行了，打開瀏覽器輸入localhost:3000就可以看到一個(gè)簡(jiǎn)單的前端頁(yè)面：