Exemple de jQuery+koa2 implémentant une simple requête Ajax-js tutoriel-php.cn

Exemple de jQuery+koa2 implémentant une simple requête Ajax

亚连

Libérer： 2018-06-01 09:39:27

original

1524 Les gens l'ont consulté

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>

Copier après la connexion

jQuery envoie une requête Ajax

envoie GET requête :

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}`
 })
});

Copier après la connexion

Envoyer POST demande :

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
 }
 })
});

Copier après la connexion

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[&#39;number&#39;]){
 $(&#39;#message&#39;).text(`姓名：${data[&#39;name&#39;]} 编号：${data[&#39;number&#39;]}`);
 } else {
 $(&#39;#message&#39;).text(data);
 }
});

Copier après la connexion

Implémentation backend

serveur Web

Utilisez

pour implémenter un serveur Web simple. 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;);

Copier après la connexion

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(&#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); // 响应请求，发送处理后的信息给客户端
});

Copier après la connexion

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(&#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);
});

Copier après la connexion

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(&#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;

Copier après la connexion

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