是否可以在快速POST / GET处理程序中使用jQuery?

cs7cruho  于 2023-01-25  发布在  jQuery
关注(0)|答案(1)|浏览(63)

我编写了这个小型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文件作为响应。

hfsqlsce

hfsqlsce1#

在评论中由Pointy回答;实际上,我不能混淆服务器端Express代码对客户端jquery的调用。

相关问题