我编写了这个小型Express服务器来从HTML表单获取数据,并使用该数据查询OpenWeatherMap:
const { OpenWeatherAPI } = require("openweather-api-node");
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const app = express();
const PORT = process.env.port || 3000;
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(PORT, () => console.log(`Server listening on port ${PORT}.`));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "/public/views/index.html"));
});
app.post("/weather/public", (req, res) => {
let city = Number(req.body.city);
let units = (req.body.units || "").trim().toUpperCase();
if (!["IMPERIAL, METRIC, STANDARD"].includes(units)) {
$("h1").innerText =
"Please input Imperial, Metric or Standard for the units.";
return;
}
let weather = new OpenWeatherAPI({
key: MY_OPENWEATHERMAP_API_KEY,
locationName: city,
units: units,
});
weather.getCurrent().then((data) => {
res.send(
`<p>Current temperature in ${city} is: ${data.weather.temp.cur}</p>`
);
});
});
HTML本身非常简单:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather query</title>
</head>
<body>
<h1>Input a city and your units!</h1>
<form action="/weather/public" method="post">
<input name="city" placeholder="Your city here" type="text" />
<input
name="units"
placeholder="Units of Measurement (imperial, metric, standard)"
type="text"
/>
<button name="submit" type="submit">Calculate!</button>
</form>
</body>
<script
crossorigin="anonymous"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
src="https://code.jquery.com/jquery-3.6.1.min.js"
></script>
<script charset="utf-8" src="../../app.js"></script>
</html>
当运行服务器并在表单中输入几项时,我得到:
ReferenceError: $ is not defined
at C:\Users\jason\code\Web-Development\weather\app.js:19:5
at Layer.handle [as handle_request] (C:\Users\jason\code\Web-Development\weather\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\jason\code\Web-Development\weather\node_modules\express\lib\router\route.js:144:13)
at Route.dispatch (C:\Users\jason\code\Web-Development\weather\node_modules\express\lib\router\route.js:114:3)
at Layer.handle [as handle_request] (C:\Users\jason\code\Web-Development\weather\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\jason\code\Web-Development\weather\node_modules\express\lib\router\index.js:284:15
at Function.process_params (C:\Users\jason\code\Web-Development\weather\node_modules\express\lib\router\index.js:346:12)
at next (C:\Users\jason\code\Web-Development\weather\node_modules\express\lib\router\index.js:280:10)
at C:\Users\jason\code\Web-Development\weather\node_modules\body-parser\lib\read.js:137:5
at AsyncResource.runInAsyncScope (node:async_hooks:204:9)
第19行是.js
文件中唯一使用jquery的位置:$("h1").innerText = "Please input Imperial, Metric or Standard for the units.";
我把jquery的<script>
标签的位置改到了<head>
块中,但这没有帮助。我想知道我是否有可能在Express的处理程序中使用jquery,或者这是不可能的,我应该发送一个错误的HTML文件作为响应。
1条答案
按热度按时间hfsqlsce1#
在评论中由Pointy回答;实际上,我不能混淆服务器端Express代码对客户端jquery的调用。