资讯专栏INFORMATION COLUMN

jQuery + koa2 实现简单的Ajax请求

leeon / 2040人阅读

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

前言

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

技术栈

koa2
jQuery

需求

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

POST

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

GET

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

文件列表

dist

index.html

index.js

server.js

router.js

前端实现 html页面

index.html,简单的html页面,通过点击按钮发送json格式的Ajax请求:




  
  Document
  


  

Hello World



查询数据:

保存数据:

再次查询数据:

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93168.html

相关文章

  • iKcamp团队制作|基于Koa2搭建Node.js实战(含视频)☞ 路由koa-router

    路由koa-router——MVC 中重要的环节:Url 处理器 ?? iKcamp 制作团队 原创作者:大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃 文案校对:李益、大力萌、Au、DDU、小溪里、小哈 风采主播:可木、阿干、Au、DDU、小哈 视频剪辑:小溪里 主站运营:给力xi、xty 教程主编:张利涛 视频地址:https://www.cctalk.com/v/151...

    netmou 评论0 收藏0
  • Koa2框架利用CORS完成跨域ajax请求

    摘要:目前代码如下到现在为止,可以对跨域请求进行响应了,但是该域下的不会被携带在请求头中。调整后顺序如下这样就减少了多余的响应头。 实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。 本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明(深层次的配置我也不会)。 CORS将请求分为简单请求和非简单请求,可以简单的认为,简单请求就是没有加上额...

    Jrain 评论0 收藏0
  • 通过koa2和Promise.race()构造一个超时取消ajax

    摘要:上说你可以使用构造函数创建一个新的对象。使用对象完成与请求的通信。服务端使用重要的点在于不能直接使用这样返回给前端会直接报错。前端的代码要注意的第三个参数设置成将请求设置为异步,然后由于超时会取消请求,所以这里根本不需要来显式的取消请求 MDN上说: 你可以使用AbortController.AbortController()构造函数创建一个新的AbortController对象。 使...

    e10101 评论0 收藏0
  • nodejs爬虫项目实战

    摘要:四爬虫功能制作是来使用的库,它的使用方法与差不多,我们通过它发起请求,在回调函数中输出结果。第一步得到一个的实例第二步定义监听事件的回调函数。 这篇文章主要介绍了NodeJS制作爬虫的全过程,包括项目建立,目标网站分析、使用superagent获取源数据、使用cheerio解析、使用eventproxy来并发抓取每个主题的内容等方面,有需要的小伙伴参考下吧。showImg(http:/...

    xcold 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<