How jQuery+koa2 implements Ajax requests-H5 Tutorial-php.cn

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>  <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!