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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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动态生成JavaScript代码
2009/03/09 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vuex实现购物车功能
2020/06/28 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python设计模式之工厂模式简单示例
2018/01/09 Python
python如何在循环引用中管理内存
2018/03/20 Python
对Python3中的input函数详解
2018/04/22 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
网游商务专员求职信
2013/10/15 职场文书
房地产出纳岗位职责
2013/12/01 职场文书
酒店开业策划方案
2014/06/02 职场文书
绘画专业自荐信
2014/07/04 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
教你用python控制安卓手机
2021/05/13 Python