本文旨在指导开发者如何在使用 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 字符串
}
// 示例：假设有一个表单，用户选择了一些电影的 imdbID
document.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 请求，并将数据传递到另一个函数中进行处理。通过合理地组织代码，并注意错误处理和异步处理，可以构建一个高效且稳定的应用。
