前言

在编写Ajax代码之前，它只关注前端实现，我觉得自己对Ajax请求的理解还不够深入。于是我编写了这个从前端到后端的Ajax实现演示，分别实现了简单的GET和POST请求，加深了对前端交互的理解。

技术栈

Koa2 jQuer要求

有些逻辑可以直接在前端处理，为了更好地理解Ajax请求，会发送到后端。

邮政

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

得到

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

列出的文件

dist index.html索引的前端实现

Html页面

Index.html，一个简单的html页面，通过点击按钮：发送一个json格式的Ajax请求

！DOCTYPE htmlhtmlhead元字符集=' UTF-8 ' title document/title script src=' http :https://cdn . bootcss.com/jquery/3 . 3 . 1/jquery . js '/script/Head body div h1 hello world/h1标签为=' person-number' number/label输入类型=' text' id=' person-number '标签为=' person-name' name/Label输入类型=' text' id=' person-name '按钮id=' save' save- jQuery实现代码-脚本src=' http:/index . js ' script/body/html jquery发送Ajax请求

发送GET请求：

var search button=$(' # search ')；var person number=$(' # person-number ')。val()；search button . click(()={ var number=$(' # search-number ')。val()；$.ajax({ type: 'GET '，url: `person/？number=$ { number } `})})；发送开机自检请求：

var saveButton=$('#save ')。单击(()={ var number=$('#person-number ')。val()；var name=$('#person-name ')。val()；$.ajax({ type: 'POST '，url: 'person '，dataType: 'json '，data: { number: number，name : name } })})；处理返回的json数据

通过ajaxComplete事件处理返回的数据，该事件只能绑定到文档对象：

//Ajax完成事件$(文档)。Ajax完成(函数(事件、xhr、设置){varobj=JSON。解析(xhr。response text)；var数据=obj.data如果。successdata[' number ']){ $(' # message ')。text(` name:$ { data[' name ']} number:$ { data[' number ']} `)；} else { $('#message ')。文本(数据)；}});后端实现

网络服务器

通过koa2实现一个简单的Web服务器。server.js:

const path=require(' path ')；const serve=require(' KOA-static ')；const Koa=require(' Koa ')；const Koabody=require(' KOA-body ')；//解析请求体const router=require('。/router . js’)的多部分、urlencoded和json格式；const app=new Koa()；app . use(serve(path . join(_ _ dirname，')。/dist’))；//读取前端静态页面app . use(koaBody())；//数据app.use(router.routes())只能通过中间件分析POST请求的请求体才能得到；app . listen(3000)；console.log('监听端口3000 ')；通过路由处理请求

处理GET请求并将数据作为json字符串返回。通过GET请求发送的查询参数以对象文字的形式保存在ctx.query属性中：

router.get('/person '，(ctx，next)={ let number=CTX。查询。数量；让temp={ }；//判断编号是否存在临时数据=/^[0-9] $/。测试（数字)?（人[数]?人民[数字] : '编号不存在' ) : '编号格式错误；temp.success=！在…之时数据[' number ']；CTX。body=JSON。stringify(temp)；//响应请求，发送处理后的信息给客户端});处理邮政请求，并以数据字符串的形式返回数据开机自检。请求的数据保存在请求的请求体中，需要用寇阿相思树体中间件自动解析后才能通过ctx.request.body获取请求的数据：

router.post('/person '，(ctx，next)={让query=CTX。请求。身体；让temp={ }；//编号必须是数字并且大于0,名字必须存在if(/^[0-9)$/。测试(查询。号)查询。name ParSeint(查询。数字，10) 0) { //判断编号是否存在if(！people[query.number]) { //保存信息人[查询。number]={ number : ParSeint(查询。号，10)，名称：查询。名称}；temp.success=truetemp.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 ' }，533: { router number查询。数量；让temp={ }；//要返回给客户端的对象，通过成功属性判断存取是否成功。 //判断编号是否存在临时数据=/^[0-9] $/。测试（数字)?（人[数]?人民[数字] : '编号不存在' ) : '编号格式错误；temp.success=！在…之时数据[' number ']；CTX。body=JSON。stringify(temp)；});router.post('/person '，(ctx，next)={让query=CTX。请求。身体；让temp={ }；//编号必须是数字并且大于0,名字必须存在if(/^[0-9)$/。测试(查询。号)查询。name ParSeint(查询。数字，10) 0) { //判断编号是否存在if(！people[query.number]) { //保存信息人[查询。number]={ number : ParSeint(查询。号，10)，名称：查询。名称}；temp.success=truetemp.data='保存成功；} else { temp . success=false temp . data='编号已存在；} } else { temp . success=false temp . data='信息格式错误；} CTX。body=JSON。stringify(temp)；});module.exports=路由器；测试

在控制台输入node server.js可以看到服务器在3000端口运行了，打开浏览器输入localhost:3000就可以看到一个简单的前端页面：

查询数据：

保存数据：

再次查询数据：

至此，一个完整的埃阿斯请求演示就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。