简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Example of jQuery+koa2 implementing a simple Ajax request

Example of jQuery+koa2 implementing a simple Ajax request

亚连
亚连Original
2018-06-01 09:39:271481browse

This article mainly introduces examples of jQuery koa2 implementing simple Ajax requests. Now I share it with you and give it as a reference.

Preface

Before writing Ajax code, I only focused on the front-end implementation. I felt that this led to my insufficient understanding of Ajax requests, so I wrote this from front-end to back-end. Ajax implements a small demo, implementing simple GET and POST requests respectively, to deepen the understanding of front-end and back-end interaction.

Technology stack

  1. koa2

  2. jQuer

Requirements

Some logic can be processed directly on the front end. It is sent to the backend for processing here to better understand the Ajax request.

POST

Save personnel information by filling in the number and name and sending a POST request. When the information is not filled in or is filled in incorrectly, a format error reminder is given; when When the information is filled in correctly but the number already exists, a reminder that the number already exists is given; when the information is filled in correctly and the number does not exist, it displays successful saving.

GET

Query personnel information by filling in the number and sending a GET request. When the number is not filled in or is filled incorrectly, a format error reminder is given; when the number is filled in If the information is correct and the number already exists, the person information will be returned; if the information is filled in correctly but the number does not exist, an error reminder that the person does not exist will be displayed.

File list

  1. dist

    1. ##index.html

    2. index.js

  2. server.js

  3. router.js

Front-end implementation

html page

##index.html

, a simple html page, by clicking Button sends Ajax request in json format: 

<!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 sends Ajax request

Send

GET

request: 

var searchButton = $(&#39;#search&#39;);
var personNumber = $(&#39;#person-number&#39;).val();
searchButton.click(() => {
 var number = $(&#39;#search-number&#39;).val();
 $.ajax({
 type: &#39;GET&#39;,
 url: `person/?number=${number}`
 })
});

Send

POST

request: 

var saveButton = $(&#39;#save&#39;).click(() => {
 var number = $(&#39;#person-number&#39;).val();
 var name = $(&#39;#person-name&#39;).val();
 $.ajax({
 type: &#39;POST&#39;,
 url: &#39;person&#39;,
 dataType: &#39;json&#39;,
 data: {
  number: number,
  name: name
 }
 })
});

Process the returned json data

Process the returned data through the

ajaxComplete

event, this event can only be bound To the document object: 

// Ajax完成事件
$(document).ajaxComplete(function(event, xhr, settings) {
 var obj = JSON.parse(xhr.responseText);
 var data = obj.data;
 if(obj.success && data[&#39;number&#39;]){
 $(&#39;#message&#39;).text(`姓名：${data[&#39;name&#39;]} 编号：${data[&#39;number&#39;]}`);
 } else {
 $(&#39;#message&#39;).text(data);
 }
});

Backend implementation

web server

Implement a simple web server through

koa2

. server.js:

const path = require(&#39;path&#39;);
const serve = require(&#39;koa-static&#39;);
const Koa = require(&#39;koa&#39;);
const koaBody = require(&#39;koa-body&#39;); // 解析 multipart、urlencoded和json格式的请求体
const router = require(&#39;./router.js&#39;);

const app = new Koa();

app.use(serve(path.join(__dirname, &#39;./dist&#39;))); // 读取前端静态页面
app.use(koaBody()); // 通过该中间件解析POST请求的请求体才能拿到数据
app.use(router.routes());
app.listen(3000);

console.log(&#39;listening on port 3000&#39;);

Handling requests via routing

Handling

GET

Request and return data in the form of json string. Query parameters sent through the GET request will be stored in the ctx.query attribute in the form of object literals: 

router.get(&#39;/person&#39;, (ctx, next) => {
 let number = ctx.query.number;
 let temp = {};
 // 判断编号是否存在
 temp.data = /^[0-9]+$/.test(number) ? (people[number] ? people[number] : &#39;编号不存在&#39; ) : &#39;编号格式错误&#39;;
 temp.success = !!temp.data[&#39;number&#39;];
 ctx.body = JSON.stringify(temp); // 响应请求，发送处理后的信息给客户端
});

Handle

POST

requests and return data in the form of json strings. The data of the POST request is stored in the request body of the request. It needs to be automatically parsed by the koa-body middleware before the requested data can be obtained through ctx.request.body: 

router.post(&#39;/person&#39;, (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 = &#39;保存成功&#39;;
 } else {
  temp.success = false;
  temp.data = &#39;编号已存在&#39;;
 }
 } else {
 temp.success = false;
 temp.data = &#39;信息格式错误&#39;;
 }
 ctx.body = JSON.stringify(temp);
});

Complete

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(&#39;/person&#39;, (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 = &#39;保存成功&#39;;
 } else {
  temp.success = false;
  temp.data = &#39;编号已存在&#39;;
 }
 } else {
 temp.success = false;
 temp.data = &#39;信息格式错误&#39;;
 }
 ctx.body = JSON.stringify(temp);
});


module.exports = router;

Test

Enter

node server.js

in the console and you can see that the server is running on port 3000. Open the browser and enter localhost:3000 and you can see it. A simple front-end page:

Query data:

Save data :

Query the data again:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

Related articles:

Sample code of actual node static file server


vue.js or js implements Chinese A-Z sorting The method


vue.js moves the array position and updates the view at the same time


The above is the detailed content of Example of jQuery+koa2 implementing a simple Ajax request. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use webpack to use jquery.mCustomScrollbar plug-inNext article：How to use webpack to use jquery.mCustomScrollbar plug-in

Related articles

See more