Home >Web Front-end >H5 Tutorial >How jQuery+koa2 implements Ajax requests
How jQuery+koa2 implements Ajax requests
- php中世界最好的语言Original
- 2018-03-27 17:39:102719browse
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: <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>
sends
GETRequest: <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>Send
Request: <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>
via
ajaxCompleteEvent processingThe data returned, this event can only be bound to the document object: <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>
web server
Implement a simple web server through
koa2. server.js: <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>
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: <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>Processing
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: <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> Complete
:<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>
Enter in the console
node server.jsOkay 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!
Related articles
See more- AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
- HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
- Detailed explanation of image drawing examples in HTML5 canvas 9
- Regular expressions and new HTML5 elements
- How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server