今回は、jQuery+koa2 が Ajax リクエストを実装する方法を説明します。jQuery+koa2 が Ajax リクエストを実装する際に実装する必要がある 注意事項 について説明します。
前書き
以前は、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
Ajax
リクエストをよりよく理解するためにバックエンドに送信されてここで処理されます。
POST
番号と名前を入力して、POST リクエストを送信して、個人情報を保存します。
情報が入力されていない場合、または正しく入力されていない場合は、形式エラーのリマインダーが表示されます。情報が正しく入力されているが番号がすでに存在する場合は、情報が入力されたときに番号がすでに存在することを示すリマインダーが表示されます。正しく入力され、番号が存在しない場合は、保存に成功したと表示されます。 🎜🎜🎜GET🎜🎜🎜番号を入力して GET リクエストを送信することで個人情報を照会します。番号が入力されていないか、正しく入力されていない場合は、形式エラーのリマインダーが表示されます。番号がすでに存在する場合は、人物情報が返されます。番号が正しく入力されても番号が存在しない場合は、人物が存在しないことを示すエラー メッセージが表示されます。 🎜🎜🎜ファイルリスト🎜🎜index.html
、単純な HTML ページ、json を送信します。ボタンをクリックすると、コード内の <code>Ajax
リクエスト> 形式: 🎜rrreee🎜🎜jQuery が Ajax リクエストを送信します🎜🎜🎜 GET
リクエストを送信します: 🎜rrreee🎜 POST
を送信します> リクエスト: 🎜rrreee🎜🎜ajaxComplete
イベント処理🎜返されたデータ、このイベントは document
オブジェクトにのみバインドできます: 🎜rrreee🎜🎜バックエンド実装🎜🎜🎜🎜Web サーバー🎜🎜🎜 koa2
を通じて実装シンプルな Web サーバー。 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
と入力すると、サーバーが実行されていることがわかります。ブラウザを開きます。 localhost:3000
と入力して、単純なフロントエンド ページを表示します: 🎜🎜🎜🎜🎜 クエリ データ: 🎜🎜🎜🎜🎜🎜🎜🎜 データを保存: 🎜🎜🎜🎜 🎜 データを再度クエリします: 🎜
この時点で、完全な Ajax リクエストのデモが完成しました。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がjQuery+koa2 が Ajax リクエストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。