jQuery+Koa2实现Ajax请求：GET与POST示例

本文将介绍如何使用jQuery与Koa2框架来实现简单的Ajax请求，包括GET和POST两种方法。文章提供了完整的示例代码，帮助读者深入理解前后端交互的工作原理。 在前端部分，我们利用jQuery库来发起Ajax请求。jQuery简化了原生JavaScript中的XMLHttpRequest对象的操作，使得异步数据获取变得更加方便。在给出的`index.html`文件中，有两个输入框分别用于填写编号和姓名，以及两个按钮，一个用于保存信息（POST请求），另一个用于查询信息（GET请求）。当用户点击“保存信息”按钮时，jQuery会捕获事件，收集表单数据，并通过`$.ajax`方法发送POST请求到服务器。如果输入格式错误或编号已存在，服务器将返回相应的错误信息，前端根据返回结果向用户显示提示。 对于POST请求，前端的`index.js`中可能包含如下代码片段： ```javascript $("#save").click(function() { var number = $("#person-number").val(); var name = $("#person-name").val(); if (!number || !name) { alert("格式错误，请输入完整信息！"); return; } $.ajax({ type: "POST", url: "/api/save", data: JSON.stringify({ number: number, name: name }), contentType: "application/json; charset=utf-8", success: function(response) { if (response.success) { alert("保存成功！"); } else if (response.error === "exists") { alert("编号已存在！"); } else { alert("格式错误！"); } }, error: function() { alert("服务器错误！"); }, }); }); ``` 在后端，我们使用Koa2作为Node.js服务器框架。Koa2提供了一种优雅的方式来处理HTTP请求和响应。`server.js`文件通常会创建一个Koa2应用，并设置路由。在`router.js`中，我们可以定义处理GET和POST请求的中间件。例如，处理POST请求的代码可能如下： ```javascript const Koa = require("koa"); const Router = require("koa-router"); const app = new Koa(); const router = new Router(); // 处理POST请求 router.post("/api/save", async ctx => { const { number, name } = ctx.request.body; // 检查数据并模拟保存操作 if (!number || !name) { ctx.status = 400; ctx.body = { error: "format" }; } else if (/* 编号已存在逻辑 */) { ctx.status = 409; ctx.body = { error: "exists" }; } else { // 假设保存成功 ctx.status = 200; ctx.body = { success: true }; } }); app.use(router.routes()).use(router.allowedMethods()); app.listen(3000); ``` 对于GET请求，前端代码会类似，只是请求类型改为GET，并可能将编号作为查询参数发送。后端代码则相应地处理GET请求，如检查编号是否存在并返回人员信息。 通过这个简单的示例，我们可以了解前后端交互的基本流程，包括数据的封装、传输、解码以及错误处理。这有助于我们深入理解Ajax请求的工作原理，从而在实际项目中更加熟练地运用。