首页前端开发HTMLjQuery+koa2怎么实现Ajax请求

jQuery+koa2怎么实现Ajax请求

时间2024-01-23 09:44:07发布访客分类HTML浏览754
导读：收集整理的这篇文章主要介绍了jQuery+koa2怎么实现Ajax请求，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来jquery+koa2怎么实现Ajax请求，jQuery+koa2实现Ajax请求的注意事项有哪些，下面就...
收集整理的这篇文章主要介绍了jQuery+koa2怎么实现Ajax请求，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来jquery+koa2怎么实现Ajax请求，jQuery+koa2实现Ajax请求的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

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

技术栈

  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>
     p>
     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>
     p id="message">
    /p>
     /p>
     !-- 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就可以看到一个简单的前端页面：

查询数据：

保存数据：

再次查询数据：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

vue2.0使用swiper实现轮播广告

vue.js-div怎么隐藏滚动条

以上就是jQuery+koa2怎么实现Ajax请求的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

Ajax

若转载请注明出处： jQuery+koa2怎么实现Ajax请求
本文地址： https://pptw.com/jishu/584037.html
HTML5本地数据库实例详解 angularjs的内存溢出怎么处理

游客 回复需填写必要信息
↑