首頁 > 文章 > web前端 > jQuery+koa2實作簡單的Ajax請求的範例

jQuery+koa2實作簡單的Ajax請求的範例

亚连原創: 2018-06-01 09:39:271481瀏覽

這篇文章主要介紹了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 = $(&#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('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(&#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就可以看到一個簡單的前端頁面：

查詢資料：