jQuery + koa2 實現簡單的Ajax請求

時間 2019-11-07

標籤 jquery koa2 koa 實現簡單 ajax 請求欄目 JQuery 简体版

原文原文鏈接

前言

以前寫Ajax代碼只管前端的實現，感受這樣致使本身對Ajax的請求的理解不夠深刻，因此寫了這個從前端到後端的Ajax實現小demo，分別實現簡單的GET和POST請求，加深下對先後端交互的理解。javascript

技術棧

koa2
jQuerycss

需求

某些邏輯能夠直接在前端處理，這裏發給後端處理是爲了更好地理解Ajax請求。html

POST

經過填寫編號和姓名併發送POST請求來保存人員信息，當信息未填寫或填寫不正確時給出格式錯誤的提醒；當信息填寫正確但編號已存在時給出編號已存在的提醒；當信息填寫正確且編號不存在時顯示保存成功。前端

GET

經過填寫編號併發送GET請求來查詢人員信息，當編號未填寫或填寫不正確時給出格式錯誤的提醒；當編號填寫正確且編號已存在時返回人員信息；當信息填寫正確但編號不存在時顯示人員不存在的錯誤提醒。java

文件列表

distnode
- index.html
- index.js
server.js
router.js

前端實現

html頁面

index.html，簡單的html頁面，經過點擊按鈕發送json格式的Ajax請求:jquery

<!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請求：web

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

發送POST請求：ajax

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對象上：json

// 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;