이번에는 jQuery+koa2에서 Ajax 요청을 구현하는 방법을 보여드리겠습니다. Ajax 요청을 구현할 때 jQuery+koa2에서 구현해야 하는 주의사항은 무엇인지 살펴보겠습니다.
머리말
과거에는 Ajax 코드를 작성할 때 프론트엔드 구현에만 집중했는데 이로 인해 Ajax 요청에 대한 이해가 부족하다고 느껴서 프론트엔드에서 Ajax 구현에 대한 간단한 데모를 작성했습니다. 간단한 GET 및 POST 요청을 구현하여 프런트엔드와 백엔드 상호 작용에 대한 이해를 심화했습니다. GET和POST请求，加深下对前后端交互的理解。
技术栈
koa2
jQuer
需求
某些逻辑可以直接在前端处理，这里发给后端处理是为了更好地理解Ajax请求。
POST
通过填写编号和姓名并发送POST请求来保存人员信息，当信息未填写或填写不正确时给出格式错误的提醒；当信息填写正确但编号已存在时给出编号已存在的提醒；当信息填写正确且编号不存在时显示保存成功。
GET
通过填写编号并发送GET请求来查询人员信息，当编号未填写或填写不正确时给出格式错误的提醒；当编号填写正确且编号已存在时返回人员信息；当信息填写正确但编号不存在时显示人员不存在的错误提醒。
文件列表
dist
index.html
index.js
server.js
router.js
前端实现
html页面
index.html，简单的html页面，通过点击按钮发送json格式的Ajax请求:
<!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发送Ajax请求
发送GET请求：
var searchButton = $('#search');
var personNumber = $('#person-number').val();
searchButton.click(() => {
var number = $('#search-number').val();
$.ajax({
type: 'GET',
url: `person/?number=${number}`
})
});发送POST请求：
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
}
})
});处理返回的json数据
通过ajaxComplete事件处理返回的数据，这个事件只能绑定到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);
}
});后端实现
web服务器
通过koa2来实现一个简单的Web服务器。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');通过路由处理请求
处理GET请求，并以json字符串的形式返回数据。通过GET请求发送的查询参数会以对象字面量的形式保存在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); // 响应请求，发送处理后的信息给客户端
});处理POST请求，并以json字符串的形式返回数据。POST请求的数据保存在请求的请求体中，需要用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);
});完整的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;测试
在控制台输入node server.js可以看到服务器在3000端口运行了，打开浏览器输入localhost:3000
기술 스택
koa2
jQuer
Requirements
someone 일부 로직은 프런트 엔드에서 직접 처리될 수 있으며 Ajax 요청을 더 잘 이해하기 위해 여기에서 처리하기 위해 백엔드로 전송됩니다.
POST
index.html, 간단한 HTML 페이지, json을 보내세요. 버튼을 클릭하면 <code>Ajax 코드> 형식 요청: 🎜rrreee🎜🎜jQuery가 Ajax 요청을 보냅니다🎜🎜🎜GET 요청을 보냅니다: 🎜rrreee🎜POST를 보냅니다. > 요청: 🎜rrreee🎜🎜ajaxComplete이벤트 처리 🎜반환된 데이터, 이 이벤트는 document 객체에만 바인딩될 수 있습니다: 🎜rrreee🎜🎜백엔드 구현🎜🎜🎜🎜웹 서버🎜🎜🎜koa2를 통해 구현됨 간단한 웹 서버. server.js: 🎜rrreee🎜🎜라우트를 통한 요청 처리🎜🎜🎜 GET 요청을 처리하고 json문자열 🎜 형식으로 데이터를 반환합니다. GET 요청을 통해 전송된 쿼리 매개변수는 객체 리터럴 형식으로 ctx.query 속성에 저장됩니다. 🎜rrreee🎜는 POST를 처리합니다. > 요청하고 json 문자열 형식으로 데이터를 반환합니다. POST 요청의 데이터는 요청 본문에 저장되며 ctx.request.body를 통해 요청된 데이터를 얻으려면 먼저 <code>koa-body 미들웨어에 의해 자동으로 구문 분석되어야 합니다. code>: 🎜rrreee 🎜Complete router.js:🎜rrreee🎜🎜Test🎜🎜🎜콘솔에 node server.js를 입력하면 서버가 실행 중인 것을 확인할 수 있습니다. 포트 3000. 브라우저를 엽니다. 간단한 프런트 엔드 페이지를 보려면 localhost:3000를 입력합니다: 🎜🎜🎜🎜🎜 데이터 쿼리: 🎜🎜🎜🎜🎜🎜🎜🎜 데이터 저장: 🎜🎜🎜🎜 🎜 데이터 다시 쿼리: 🎜
이 시점에서 완전한 Ajax 요청 데모가 완료되었습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
위 내용은 jQuery+koa2가 Ajax 요청을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
