jQuery+koa2怎麼實作Ajax請求

這次帶給大家jQuery+koa2怎麼實作Ajax請求，jQuery+koa2實作Ajax請求的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

之前寫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請求:

nbsp;html>


 <meta>
 <title>Document</title>
 <script></script>


 <p>
 </p><h1 id="Hello-World">Hello World</h1>
 <label>编号</label>
 <input>
 <label>姓名</label>
 <input>
 <button>保存信息</button>
 <label>编号</label>
 <input>
 <button>查询信息</button>
 <br>
 <br>
 <p></p>
 
 <!-- jQuery实现代码 -->
 <script><script>

</script>

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 = /^[0-9]+$/.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就完成了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue2.0使用swiper實作輪播廣告

vue.js-div怎麼隱藏捲動條

以上是jQuery+koa2怎麼實作Ajax請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！