Maison > Article > interface Web > Exemple de jQuery+koa2 implémentant une simple requête Ajax
Exemple de jQuery+koa2 implémentant une simple requête Ajax
- 亚连original
- 2018-06-01 09:39:271481parcourir
Cet article présente principalement l'exemple de jQuery+koa2 implémentant une simple requête Ajax. Maintenant, je le partage avec vous et le donne comme référence.
Avant-propos
Avant d'écrire du code Ajax, je me concentrais uniquement sur l'implémentation front-end, je sentais que cela conduisait à une compréhension insuffisante des requêtes Ajax, alors j'ai écrit. ceci du front-end au back-end. Ajax implémente une petite démo, implémentant respectivement des requêtes simples GET et POST pour approfondir la compréhension de l'interaction front-end et back-end.
Pile technologique
koa2
jQuer
Exigences
Certaines logiques peuvent être traitées directement sur le front-end. Ici, elles sont envoyées au back-end pour une meilleure compréhension de la requête Ajax.
POST
Enregistrez les informations de la personne en renseignant le numéro et le nom et en envoyant une demande POST Lorsque les informations ne sont pas renseignées ou sont mal renseignées, un. un rappel d'erreur de format est donné ; lorsque les informations sont correctement renseignées mais que le numéro existe déjà, un rappel que le numéro existe déjà est donné ; lorsque les informations sont correctement renseignées et que le numéro n'existe pas, il affiche une sauvegarde réussie ;
GET
Interrogez les informations personnelles en remplissant le numéro et en envoyant une demande GET. Lorsque le numéro n'est pas renseigné ou est mal renseigné, un rappel d'erreur de format est affiché. donné ; lorsque le numéro est renseigné. Si les informations sont correctes et que le numéro existe déjà, les informations sur la personne seront renvoyées. Si les informations sont correctement renseignées mais que le numéro n'existe pas, un rappel d'erreur indiquant que la personne n'existe pas sera renvoyé. être affiché.
Liste des fichiers
dist
index.html
index.js
server.js
router.js
Implémentation front-end de la
page html
index.html, page html simple, envoi au format json par en cliquant sur le bouton Ajax requête :
<!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 envoie une requête Ajax
envoie GET requête :
var searchButton = $('#search');
var personNumber = $('#person-number').val();
searchButton.click(() => {
var number = $('#search-number').val();
$.ajax({
type: 'GET',
url: `person/?number=${number}`
})
});
Envoyer POST demande :
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
}
})
});
Traitez les données json renvoyées
Traitez les données renvoyées via l'événement ajaxComplete Cet événement ne peut être lié qu'à l'objet 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);
}
});
Implémentation backend
serveur Web
Utilisez pour implémenter un serveur Web simple. 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');
gère la demande via l'itinéraire
gère la demande avec GETRenvoyer les données sous forme de chaîne. Les paramètres de requête envoyés via la requête json seront stockés dans l'attribut GET sous forme de littéraux d'objet : 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); // 响应请求，发送处理后的信息给客户端
}); gère le request , et renvoie les données sous forme de POST chaîne. Les données de la requête POST sont stockées dans le corps de la requête. Elles doivent être automatiquement analysées par le middleware json avant que les données demandées puissent être obtenues via 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);
});Complet
: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;
Test
Entrez dans la console Vous pouvez voir que le serveur fonctionne sur le port 3000. Ouvrez le navigateur et entrez node server.js pour voir une simple page frontale : localhost:3000
Exemple de code pour le serveur de fichiers statiques de nœud réel
vue.js ou js pour implémenter le chinois A-Z tri La méthode de
vue.js déplace la position du tableau et met à jour la méthode d'affichage en même temps
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!