前言

之前写Ajax代码只管前端的实现，感觉这样导致自己对Ajax的请求的理解不够深入，所以写了这个从前端到后端的Ajax实现小demo，分别实现简单的GET和POST请求，加深下对前后端交互的理解。

技术栈

1. koa2

2. jQuer

需求

某些逻辑可以直接在前端处理，这里发给后端处理是为了更好地理解Ajax请求。

POST

通过填写编号和姓名并发送POST请求来保存人员信息，当信息未填写或填写不正确时给出格式错误的提醒；当信息填写正确但编号已存在时给出编号已存在的提醒；当信息填写正确且编号不存在时显示保存成功。

GET

通过填写编号并发送GET请求来查询人员信息，当编号未填写或填写不正确时给出格式错误的提醒；当编号填写正确且编号已存在时返回人员信息；当信息填写正确但编号不存在时显示人员不存在的错误提醒。

文件列表

1. dist

1. index.html

2. index.js

2. server.js

3. router.js

前端实现

html页面

index.html，简单的html页面，通过点击按钮发送json格式的Ajax请求:

 
 
 


 

 
Hello World
 编号
 
 姓名
 
 保存信息
 编号
 
 查询信息
 

 

 

 

 
 

jQuery发送Ajax请求

发送GET请求：

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

发送POST请求：

var saveButton = $(&＃39;#save&＃39;).click(() => {
 var number = $(&＃39;#person-number&＃39;).val();
 var name = $(&＃39;#person-name&＃39;).val();
 $.ajax({
 type: &＃39;POST&＃39;,
 url: &＃39;person&＃39;,
 dataType: &＃39;json&＃39;,
 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[&＃39;number&＃39;]){
 $(&＃39;#message&＃39;).text(`姓名：${data[&＃39;name&＃39;]} 编号：${data[&＃39;number&＃39;]}`);
 } else {
 $(&＃39;#message&＃39;).text(data);
 }
});

后端实现

web服务器

通过koa2来实现一个简单的Web服务器。server.js：

const path = require(&＃39;path&＃39;);
const serve = require(&＃39;koa-static&＃39;);
const Koa = require(&＃39;koa&＃39;);
const koaBody = require(&＃39;koa-body&＃39;); // 解析 multipart、urlencoded和json格式的请求体
const router = require(&＃39;./router.js&＃39;);
const app = new Koa();
app.use(serve(path.join(dirname, &＃39;./dist&＃39;))); // 读取前端静态页面
app.use(koaBody()); // 通过该中间件解析POST请求的请求体才能拿到数据
app.use(router.routes());
app.listen(3000);
console.log(&＃39;listening on port 3000&＃39;);

通过路由处理请求

处理GET请求，并以json字符串的形式返回数据。通过GET请求发送的查询参数会以对象字面量的形式保存在ctx.query属性中：

router.get(&＃39;/person&＃39;, (ctx, next) => {
 let number = ctx.query.number;
 let temp = {};
 // 判断编号是否存在
 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : &＃39;编号不存在&＃39; ) : &＃39;编号格式错误&＃39;;
 temp.success = !!temp.data[&＃39;number&＃39;];
 ctx.body = JSON.stringify(temp); // 响应请求，发送处理后的信息给客户端
});

处理POST请求，并以json字符串的形式返回数据。POST请求的数据保存在请求的请求体中，需要用koa-body中间件自动解析后才能通过ctx.request.body获取请求的数据：

router.post(&＃39;/person&＃39;, (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 = &＃39;保存成功&＃39;;
 } else {
  temp.success = false;
  temp.data = &＃39;编号已存在&＃39;;
 }
 } else {
 temp.success = false;
 temp.data = &＃39;信息格式错误&＃39;;
 }
 ctx.body = JSON.stringify(temp);
});

完整的router.js:

const Router = require(&＃39;koa-router&＃39;);
const router = new Router();
// 初始的人员信息对象，信息从这里储存和读取。
const people = {
 1: { number: 1, name: &＃39;Dan Friedell&＃39; },
 2: { number: 2, name: &＃39;Anna Matteo&＃39; },
 3: { number: 3, name: &＃39;Susan Shand&＃39; },
 4: { number: 4, name: &＃39;Bryan Lynn&＃39; },
 5: { number: 5, name: &＃39;Mario Ritter&＃39; },
};
router.get(&＃39;/person&＃39;, (ctx, next) => {
 let number = ctx.query.number;
 let temp = {}; // 要返回给客户端的对象，通过success属性判断存取是否成功。
 // 判断编号是否存在
 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : &＃39;编号不存在&＃39; ) : &＃39;编号格式错误&＃39;;
 temp.success = !!temp.data[&＃39;number&＃39;];
 ctx.body = JSON.stringify(temp);
});
router.post(&＃39;/person&＃39;, (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 = &＃39;保存成功&＃39;;
 } else {
  temp.success = false;
  temp.data = &＃39;编号已存在&＃39;;
 }
 } else {
 temp.success = false;
 temp.data = &＃39;信息格式错误&＃39;;
 }
 ctx.body = JSON.stringify(temp);
});
module.exports = router;

测试

在控制台输入node server.js可以看到服务器在3000端口运行了，打开浏览器输入localhost:3000就可以看到一个简单的前端页面：

vue.js-div怎么隐藏滚动条

以上就是jQuery+koa2怎么实现Ajax请求的详细内容，更多请关注其它相关文章！