This time I will show you how jQuery+koa2 implements Ajax requests. What are the precautions for jQuery+koa2 to implement Ajax requests. Here are actual cases, let’s take a look.
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 the person information by filling in the number and name and sending a POST request , which is given when the information is not filled in or is filled in incorrectly A reminder for format errors; a reminder that the number already exists when the information is filled in correctly but the number already exists; a successful save when the information is filled in correctly and the number does not exist.
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
- ##index.html
- index.js
- server.js
- router.js
Front-end implementation
html page
##index.html
, a simple html page, by clicking Button sends Ajax request in json format: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!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></pre><div class="contentsignin">Copy after login</div></div>
jQuery sends Ajax request
sends
GET
Request: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var searchButton = $('#search');
var personNumber = $('#person-number').val();
searchButton.click(() => {
var number = $('#search-number').val();
$.ajax({
type: 'GET',
url: `person/?number=${number}`
})
});</pre><div class="contentsignin">Copy after login</div></div>Send
POST
Request: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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
}
})
});</pre><div class="contentsignin">Copy after login</div></div>
Process the returned json data
via
ajaxComplete
Event processingThe data returned, this event can only be bound to the document object: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 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);
}
});</pre><div class="contentsignin">Copy after login</div></div>
Backend implementation
web server
Implement a simple web server through
koa2
. server.js: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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');</pre><div class="contentsignin">Copy after login</div></div>
Handle the request via route
Handle the
GET
request and end it with jsonReturn data in the form of string. Query parameters sent through the GET request will be stored in the ctx.query attribute in the form of object literals: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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); // 响应请求，发送处理后的信息给客户端
});</pre><div class="contentsignin">Copy after login</div></div>Processing
POST
requests , and return data in the form of json string. 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: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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);
});</pre><div class="contentsignin">Copy after login</div></div> Complete
router.js
:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;</pre><div class="contentsignin">Copy after login</div></div>
Test
Enter in the console
node server.js
Okay Seeing that the server is running on port 3000, open the browser and enter localhost:3000 to see a simple front-end page:
Query data:
Save data:
Query data again:
At this point, a complete Ajax request demo is completed.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
vue2.0 uses swiper to implement carousel advertising
How to hide scrolling in vue.js-div strip
The above is the detailed content of How jQuery+koa2 implements Ajax requests. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
