jQuery+koa2怎麼實作Ajax請求
- php中世界最好的语言原創
- 2018-03-27 17:39:102668瀏覽
這次帶給大家jQuery+koa2怎麼實作Ajax請求，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就可以看到一個簡單的前端頁面：
至此，一個完整的Ajax請求demo就完成了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是jQuery+koa2怎麼實作Ajax請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！