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


Posted in jQuery onMarch 06, 2018

前言

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

技术栈

  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请求:

<!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 = /^[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就可以看到一个简单的前端页面:

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

查询数据:

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

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

保存数据:

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

再次查询数据:

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

至此,一个完整的Ajax请求demo就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
jQuery 改变P标签文本值方法
Feb 24 #jQuery
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php whois查询API制作方法
2011/06/23 PHP
使用php实现截取指定长度
2013/08/06 PHP
laravel请求参数校验方法
2019/10/10 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Python中编写ORM框架的入门指引
2015/04/29 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python中学习K-Means和图片压缩
2017/11/20 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python实现自动打卡的示例代码
2020/10/10 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
保护母亲河倡议书
2014/04/14 职场文书
软件售后服务方案
2014/05/29 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
Python内置的数据类型及使用方法
2022/04/13 Python