Comment jQuery+koa2 implémente les requêtes Ajax-Tutoriel H5-php.cn

Comment jQuery+koa2 implémente les requêtes Ajax

php中世界最好的语言

Libérer： 2018-03-27 17:39:10

original

2677 Les gens l'ont consulté

Cette fois, je vais vous montrer comment jQuery+koa2 implémente les requêtes Ajax. Quelles sont les précautions pour que jQuery+koa2 implémente les requêtes Ajax. Ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos

J'avais l'habitude d'écrire du code Ajax et de me concentrer uniquement sur l'implémentation front-end. J'avais le sentiment que cela conduisait à une compréhension insuffisante des requêtes Ajax, alors je me suis concentré sur l'implémentation front-end. a é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 backend pour traitement afin de mieux comprendre la requête Ajax.

POST

Enregistrez les informations de la personne en renseignant le numéro et le nom et envoyez une Demande POST, donnée lorsque les informations ne sont pas renseignées ou est mal renseigné Un rappel pour les erreurs de format ; un rappel que le numéro existe déjà lorsque l'information est correctement renseignée mais que le numéro existe déjà ; une sauvegarde réussie lorsque l'information est correctement renseignée et que le numéro n'existe pas ;

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

Copier après la connexion

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

Copier après la connexion

Traiter les données json renvoyées

Traiter les données renvoyées par ajaxComplete événement Cet événement ne peut que. être lié À 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);
 }
});

Copier après la connexion

implémentation backend

serveur web

via koa2 Implémentez un serveur Web simple. 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');

Copier après la connexion

gère la demande via la route

gère la demande GET sous forme de json chaîne Données de retour. Les paramètres de requête envoyés via la requête GET seront stockés dans l'attribut ctx.query sous forme de littéraux d'objet :

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

Copier après la connexion

traite la requête POST et renvoie les données sous la forme d'un json 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 koa-body avant que les données demandées puissent être obtenues via 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);
});

Copier après la connexion

Compléter. 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;

Copier après la connexion

Test

Entrez node server.js sur la console pour voir que le serveur fonctionne sur le port 3000. Ouvrez le navigateur et saisissez localhost:3000 pour voir une simple page Front-end :

Données de requête :

Enregistrer les données :

Interroger à nouveau les données :

À ce stade, une démonstration complète de la requête Ajax est terminée.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

vue2.0 utilise swiper pour implémenter des publicités carrousel

Comment masquer le défilement dans vue.js -divArticle

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!