jQuery + koa2 实现简单的Ajax请求

leeon 发布于2019-08-22 15:06 / 2052人阅读

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

前言

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

技术栈

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就完成了。

云服务器 GPU云服务器 jquery发送ajax请求 jQuery监控ajax请求 jquery_ajax请求 jquery_ajax异步请求

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

转载请注明本文地址：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 2019-08-21 18:23 评论0 收藏0
Koa2框架利用CORS完成跨域ajax请求

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

Jrain 2019-08-22 15:06 评论0 收藏0
通过koa2和Promise.race()构造一个超时取消的ajax。

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

e10101 2019-08-23 14:39 评论0 收藏0
nodejs爬虫项目实战

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

xcold 2019-08-19 18:32 评论0 收藏0