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 submit()不能提交表单的解决方法
Apr 24 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery中库的引用方法
Jan 06 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jquery实现简单自动轮播图效果
Jul 29 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
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
document.compatMode介绍
2009/05/21 Javascript
javascript 闭包详解
2015/07/02 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
js实现五星评价功能
2017/03/08 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
js实现分页功能
2017/05/24 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
jQuery实现增删改查
2020/12/22 jQuery
js制作提示框插件
2020/12/24 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python中dict使用方法详解
2019/07/17 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
金智子午JAVA面试题
2015/09/04 面试题
大课间体育活动方案
2014/03/12 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB