我今天就来讲讲我学怎么用jQuery和koa2做Ajax请求的经历，挺好玩儿的~我会教你们怎么用GET和POST请求，还会分享下我遇到的难题以及解决办法。这样的话，你们对Ajax请求应该能更明白点儿
初识Ajax请求
以前我只懂一点Ajax，主要是做网页的。但后来发现，不懂后台的话，Ajax技术就上不去。所以这次，我决定把前后台都弄明白。
创建简单的HTML页面
搞定！我搞出了个简单的HTML，里头有个神奇按钮可以用来发Ajax请求~这个就是我们项目的客户端界面，用着特别好用，你想发啥数据，直接一点就完事。
使用jQuery发送Ajax请求
jquery这玩意儿真牛！它把Ajax流程搞得特简单，还教我们咋用GET或POST发请求，还有JSON数据处理，实在太好用！这下子，我编程技能都提升不少！对请求和响应有更深理解！
利用koa2搭建后端服务器
nbsp;html>Document
Hello World
我搞了个小巧玲珑的Web服务器，不仅能快速响应前端传来的各种请求，还能轻松地把数据转换成JSON格式再发回给他们。
处理GET请求
var searchButton = $('#search');
var personNumber = $('#person-number').val();
searchButton.click(() => {
var number = $('#search-number').val();
$.ajax({
type: 'GET',
url: `person/?number=${number}`
})
});
搞定GET请求提取查询参数的方法和回传正确信息到前端这件事了。深以为然，原来后端就是按照前端所需的数据来提供服务滴。
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
}
})
});
处理POST请求
POST和GET不同点在于数据要放在请求内容里。要用到像koa-body这样的工具来分析，学懂之后就没问题！这个过程中学到了怎么对付各种奇奇怪怪的请求格式。
// 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);
}
});
处理返回的JSON数据
GET或POST都行，搞懂json数据才是王道！我们发现用jQuery的ajaxComplete事件能搞定。以后不管什么信息，你都可以在网页上轻轻松松拿到并展示啦～
实战案例：人员信息管理
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');
这个活儿就是个员工档案系统。操作简单得很，只要输编号跟名字就能存或者找东西。干完后，不仅我的编程技术提高了不少，还学到了怎么根据客户需求开发新功能。
遇到的问题及解决方法
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); // 响应请求，发送处理后的信息给客户端
});
老是碰上乱七八糟的事，排版错，编号重复之类的。一个个搞定后，感觉对Ajax请求更明白了些，实战经验也多了。
总结与反思
选了那门课以后，我就会用jQuery和koa2处理AJAX请求！这种小技巧让我不管是搞前端还是后台都没压力。学东西，不光得死记硬背，还得多动手实践，这样才能越做越好。
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);
});
提问与互动
有没有什么问题超有意思的，你又是咋解决的？快来分享给大伙儿，这样我们都能学到东西！记得关注点赞或者分享文章，让更多人受益哈。
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;
评论0