この記事では、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 id="Hello-nbsp-World">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
番号を入力して GET リクエストを送信することで個人情報を照会します。番号が入力されていないか、正しく入力されていない場合は、形式エラーのリマインダーが表示されます。番号がすでに存在する場合は、人物情報が返されます。番号が正しく入力されても番号が存在しない場合は、人物が存在しないことを示すエラー メッセージが表示されます。
- dist
- index.html
-
index.js - ルーター.js
フロントエンド実装
html ページ
🎜🎜index.html
、単純な HTML ページ、json を送信します。ボタンをクリックすると、コードでの <code>Ajax
リクエスト> 形式: 🎜🎜rrreee🎜🎜🎜🎜jQuery が Ajax リクエストを送信します🎜🎜🎜 GET
リクエストを送信します: 🎜
イベント処理によって返されるデータは、document
オブジェクトにのみバインドできます: 🎜
🎜rrreee🎜🎜 🎜🎜バックエンド実装🎜🎜🎜🎜 Web サーバー🎜🎜🎜 は、koa2
を通じて単純な Web サーバーを実装します。 server.js
: 🎜
🎜rrreee🎜🎜🎜🎜ルーティングを通じてリクエストを処理します 🎜🎜🎜GET
リクエストを処理し、 で終了しますjson
文字列形式でデータを返します。 GET
リクエストを通じて送信されたクエリ パラメータは、オブジェクト リテラルの形式で ctx.query
属性に保存されます: 🎜
🎜rrreee🎜🎜 🎜 POST
リクエストを処理し、json
文字列の形式でデータを返します。 POST リクエストのデータは、リクエストのリクエスト本文に保存されます。リクエストされたデータを ctx.request を通じて取得する前に、<code>koa-body
ミドルウェアによって自動的に解析される必要があります。 body: 🎜🎜rrreee🎜🎜🎜Complete router.js
:🎜
🎜rrreee🎜🎜🎜🎜テスト🎜🎜 🎜 node server.js
と入力します。サーバーがポート 3000 で実行されていることがわかります。ブラウザを開いて localhost:3000
と入力すると、単純なフロントエンドが表示されます。ページ: 🎜🎜🎜🎜🎜 データのクエリ: 🎜🎜🎜🎜🎜🎜🎜🎜 データを保存: 🎜🎜🎜🎜🎜 データを再度クエリ: 🎜🎜🎜🎜🎜 上記は、皆さんのために私がまとめたものです。するだろう今後も皆様のお役に立ちますように。 🎜🎜関連記事: 🎜🎜🎜実際のノード静的ファイルサーバーのサンプルコード🎜🎜🎜🎜🎜vue.jsまたは中国語のA-Zソートを実装するjsメソッド🎜🎜🎜🎜🎜vue.jsメソッドで配列の位置を移動し、ビューを更新同時に🎜 🎜🎜🎜🎜🎜🎜🎜🎜
以上が単純な Ajax リクエストを実装する jQuery+koa2 の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)
