ホームページ > 記事 > ウェブフロントエンド > jQuery+koa2 が Ajax リクエストを実装する方法

jQuery+koa2 が Ajax リクエストを実装する方法

php中世界最好的语言オリジナル: 2018-03-27 17:39:102620ブラウズ

今回は、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

テクノロジースタック

koa2
jQuer

要件

誰か一部のロジックはフロントエンドで直接処理でき、Ajax リクエストをよりよく理解するためにバックエンドに送信されてここで処理されます。

POST

番号と名前を入力して、POST リクエストを送信して、個人情報を保存します。

情報が入力されていない場合、または正しく入力されていない場合は、形式エラーのリマインダーが表示されます。情報が正しく入力されているが番号がすでに存在する場合は、情報が入力されたときに番号がすでに存在することを示すリマインダーが表示されます。正しく入力され、番号が存在しない場合は、保存に成功したと表示されます。 🎜🎜🎜GET🎜🎜🎜番号を入力して GET リクエストを送信することで個人情報を照会します。番号が入力されていないか、正しく入力されていない場合は、形式エラーのリマインダーが表示されます。番号がすでに存在する場合は、人物情報が返されます。番号が正しく入力されても番号が存在しない場合は、人物が存在しないことを示すエラーメッセージが表示されます。 🎜🎜🎜ファイルリスト🎜🎜

🎜dist🎜

🎜index.html🎜
🎜index.js🎜

🎜server.js🎜
🎜ルーター.js🎜

🎜🎜フロントエンド実装🎜🎜🎜🎜html ページ🎜🎜🎜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 サイトの他の関連記事に注目してください。

推奨読書:

vue2.0はスワイパーを使用してカルーセル広告を実装します

vue.js-div スクロールバーを非表示にする方法

以上がjQuery+koa2 が Ajax リクエストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 中间件 json jquery ajax vue.js html 字符串栈并发 JS 对象事件

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：element-ui がテーブルスクロール効果を操作する方法次の記事：element-ui がテーブルスクロール効果を操作する方法

続きを見る