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
koa2
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
dist
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>
Send
GET request:
var searchButton = $('#search'); var personNumber = $('#person-number').val(); searchButton.click(() => { var number = $('#search-number').val(); $.ajax({ type: 'GET', url: `person/?number=${number}` }) });
Send
POST request:
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 } }) });
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['number']){ $('#message').text(`姓名:${data['name']} 编号:${data['number']}`); } else { $('#message').text(data); } });
web server
Implement a simple web server through
koa2. 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');
Handling
GETRequest 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('/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); // 响应请求,发送处理后的信息给客户端 });
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('/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); });
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('/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;
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 servervue.js or js implements Chinese A-Z sorting The methodvue.js moves the array position and updates the view at the same timeThe 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!