jQuery+koa2实现简单的Ajax请求的示例

网络编程 2024/5/19 佚名

3 2 1

前言

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

技术栈

koa2
jQuer

需求

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

POST

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

GET

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

文件列表

dist
1. index.html
2. 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="/UploadFiles/2021-04-02/jquery.js">

jQuery发送Ajax请求
发送GET请求：


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

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) "htmlcode">

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) "text-align: center">
查询数据：


保存数据：

再次查询数据：

至此，一个完整的Ajax请求demo就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    koa2,Ajax请求,koa,post请求,koa,get请求 
                                
                                    标签：
                                        koa2,Ajax请求,koa,post请求,koa,get请求

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“jQuery+koa2实现简单的Ajax请求的示例”

jQuery+koa2实现简单的Ajax请求的示例

暂无“jQuery+koa2实现简单的Ajax请求的示例”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240519

jQuery+koa2实现简单的Ajax请求的示例

koa2,Ajax请求,koa,post请求,koa,get请求

vue使用xe-utils函数库的具体方法

angular4 JavaScript内存溢出问题

评论“jQuery+koa2实现简单的Ajax请求的示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接