jQuery + koa2 实现简单的Ajax请求

头像
Ned2017
    阅读 5 分钟
    2

    前言

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

    技术栈

    koa2
    jQuery

    需求

    某些逻辑可以直接在前端处理，这里发给后端处理是为了更好地理解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>
  <div>
    <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>
    <div id="message"></div>
  </div>
  <!-- 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 = /^[1-9]\d*$/.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就完成了。

    koa2jqueryjavascript
    Ned2017
    175 声望2 粉丝

    Work hard, Play hard.

    « 上一篇
    Wepback + koa2 配置开发环境

    引用和评论

    推荐阅读
    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.9k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新