本文旨在指导开发者如何在使用 Node.js 和 Express 框架时，正确地处理 POST 请求接收到的数据，并将其传递到另一个函数中进行进一步处理。我们将重点关注服务器端的数据接收和处理，以及客户端如何通过 AJAX 请求获取处理后的数据，并最终在前端页面动态构建内容。
后端 (server.js) 数据接收与处理
首先，确保你的 Express 应用正确配置了中间件，以便能够解析 POST 请求体中的数据。常用的中间件包括 express.json() 和 express.urlencoded({ extended: true })。
const express = require('express');const http = require('http');const app = express();// 添加中间件以解析 JSON 格式的请求体app.use(express.json());// 添加中间件以解析 URL 编码格式的请求体app.use(express.urlencoded({ extended: true }));app.post("/movies", function (req, res) { const imdbIDs = req.body; if (!Array.isArray(imdbIDs)) { return res.status(400).send("Invalid input: imdbIDs must be an array."); } const apiKey = 'YOUR_API_KEY'; // 替换为你的OMDb API密钥 const movies = []; let completedRequests = 0; // 用于跟踪已完成的请求数量 if (imdbIDs.length === 0) { return res.status(200).send(movies); // 如果imdbIDs为空，直接返回空数组 } imdbIDs.forEach((imdbID, index) => { const apiUrl = `http://www.omdbapi.com/?&apikey=${apiKey}&i=${imdbID}`; http.get(apiUrl, (response) => { let responseData = ''; response.on('data', (chunk) => { responseData += chunk; }); response.on('end', () => { try { const movieData = JSON.parse(responseData); if (movieData.Response === 'True') { const movie = { Released: movieData.Released !== 'N/A' ? new Date(movieData.Released).toISOString() : null, Runtime: movieData.Runtime !== 'N/A' ? parseInt(movieData.Runtime) : null, Genres: movieData.Genre ? movieData.Genre.split(',').map(genre => genre.trim()) : [], Directors: movieData.Director ? movieData.Director.split(',').map(director => director.trim()) : [], Writers: movieData.Writer ? movieData.Writer.split(',').map(writer => writer.trim()) : [], Actors: movieData.Actors ? movieData.Actors.split(',').map(actor => actor.trim()) : [], MetaScore: movieData.Metascore !== 'N/A' ? parseInt(movieData.Metascore) : null, imdbRating: movieData.imdbRating !== 'N/A' ? Number(movieData.imdbRating) : null, }; movies.push(movie); } else { console.error(`Error retrieving movie with imdbID ${imdbID}: ${movieData.Error}`); } } catch (error) { console.error('Error parsing movie data:', error); } finally { completedRequests++; if (completedRequests === imdbIDs.length) { // 所有请求都已完成，发送响应 res.status(200).send(movies); } } }); }).on('error', (error) => { console.error('Error fetching movie data:', error); completedRequests++; if (completedRequests === imdbIDs.length) { // 即使有错误，也发送响应 res.status(200).send(movies); } }); });});app.listen(3000, () => { console.log('Server listening on port 3000');});
关键改进：
错误处理: 添加了更完善的错误处理机制，包括检查 imdbIDs 是否为数组，以及在API请求失败时记录错误信息。异步处理： 使用 completedRequests 变量来跟踪异步请求的完成情况，确保在所有 API 请求完成后再发送响应。数据清洗： 对从 API 获取的数据进行清洗，确保 Released 字段能被正确转换为日期，并处理 N/A 值。空数组处理: 增加了对 imdbIDs 为空数组的特殊处理，避免不必要的API请求。简化响应发送: 所有情况下都确保最终会发送响应，避免请求hang住。
注意事项：
替换 YOUR_API_KEY 为你实际的 OMDb API 密钥。API密钥是敏感信息，不要将其暴露在客户端代码中。
前端 (index.js) 数据请求与处理
在前端，使用 XMLHttpRequest 或 fetch API 向 /movies 发送 POST 请求，并将选中的电影 ID 作为请求体发送。然后，处理服务器返回的电影数据，动态构建 HTML 元素。
function loadMovies(imdbIDs) { const xhr = new XMLHttpRequest(); xhr.open("POST", "/movies"); xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求头 xhr.onload = function () { const mainElement = document.querySelector("main"); // 清空 main 元素 while (mainElement.firstChild) { mainElement.firstChild.remove(); } if (xhr.status === 200) { try { const movies = JSON.parse(xhr.responseText); movies.forEach(movie => { // 使用 MovieBuilder 构建电影元素，并添加到 main 元素 const movieElement = new MovieBuilder(movie, deleteMovie).build(); // 假设 MovieBuilder 有 build 方法 mainElement.appendChild(movieElement); }); } catch (error) { console.error("Error parsing JSON:", error); mainElement.textContent = "Error parsing movie data."; } } else { mainElement.textContent = `Data could not be loaded, status ${xhr.status} - ${xhr.statusText}`; } }; xhr.onerror = function () { const mainElement = document.querySelector("main"); mainElement.textContent = "Network error occurred."; }; xhr.send(JSON.stringify(imdbIDs)); // 发送 JSON 字符串}// 示例：假设有一个表单，用户选择了一些电影的 imdbIDdocument.getElementById("movieForm").addEventListener("submit", function (event) { event.preventDefault(); // 阻止默认的表单提交 const selectedMovies = []; const checkboxes = document.querySelectorAll('input[name="movie"]:checked'); // 假设checkbox的name是movie checkboxes.forEach(checkbox => { selectedMovies.push(checkbox.value); // 获取选中的 imdbID }); loadMovies(selectedMovies); // 调用 loadMovies 函数，传递选中的 imdbID 数组});// 假设的 MovieBuilder 类 (需要根据你的实际代码调整)class MovieBuilder { constructor(movie, deleteMovieCallback) { this.movie = movie; this.deleteMovieCallback = deleteMovieCallback; } build() { const movieElement = document.createElement('div'); movieElement.classList.add('movie'); // 添加电影信息到元素 (根据你的数据结构调整) const titleElement = document.createElement('h2'); titleElement.textContent = this.movie.Title || 'Untitled'; movieElement.appendChild(titleElement); const releasedElement = document.createElement('p'); releasedElement.textContent = `Released: ${this.movie.Released || 'N/A'}`; movieElement.appendChild(releasedElement); // 其他电影信息的添加... return movieElement; }}
关键改进：
POST 请求: 使用 xhr.open(“POST”, “/movies”) 发送 POST 请求。设置请求头: 使用 xhr.setRequestHeader(“Content-Type”, “application/json”) 设置请求头，告诉服务器发送的是 JSON 数据。发送 JSON 数据: 使用 xhr.send(JSON.stringify(imdbIDs)) 将 imdbIDs 数组转换为 JSON 字符串并发送。错误处理: 添加了 onerror 事件处理函数，处理网络错误。JSON 解析错误处理: 在 onload 事件处理函数中，添加了 try…catch 块，处理 JSON 解析错误。动态构建 HTML: 使用 MovieBuilder 类动态构建 HTML 元素，并添加到 main 元素中。表单提交处理: 添加了表单提交事件处理函数，获取选中的电影 ID，并调用 loadMovies 函数。
注意事项：
确保 HTML 中有一个 main 元素，用于显示电影信息。根据你的实际数据结构和 HTML 结构，调整 MovieBuilder 类的代码。根据你的实际需求，调整表单提交事件处理函数的代码。确保你的服务器端代码能够处理 Content-Type: application/json 的请求。
总结
本教程详细介绍了如何使用 Node.js/Express 处理 POST 请求，并将数据传递到另一个函数中进行处理。通过合理地组织代码，并注意错误处理和异步处理，可以构建一个高效且稳定的应用。
以上就是使用 Node.js/Express 处理 POST 请求数据并在另一函数中应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/16110.html
微信扫一扫 
支付宝扫一扫 
