时间戳

首页 > 解决方案 > 如何将整个 html 页面调用到请求处理程序 JavaScript 文件？

javascript - 如何将整个 html 页面调用到请求处理程序 JavaScript 文件？

问题描述

我有一个带有 post 方法和文本区域字段的简单表单的 html 页面。我想用一个局部变量调用整个 html 页面，并使用 http write 方法将它返回给浏览器。这是html的代码片段。

<!DOCTYPE html>
<html id="upload-htm" lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload file</title>
  </head>

  <body>
    <form action="/upload" method="post">
      <textarea name="inpt-text" id="in-txt" cols="30" rows="10"></textarea>
      <button type="submit">upload file</button>
    </form>
  </body>
  <script src="./requestHandlers.js"></script>

</html>

然后我还有一个 requestHandler.js 文件。我的请求处理程序应该显示它对浏览器的响应。

function start(res) {
  console.log("Request handler 'start' was called");
  let body = document.getElementById('upload-htm');
  res.writeHead(200, {
    "content-type": "text/plain"
  });
  res.write(body);
  res.end();
}

function upload(res) {
  console.log("Request handler 'upload' was called");
  res.writeHead(200, {
    "content-type": "text/plain"
  });
  res.write(`Hello upload Mr. Paullaster`);
  res.end();
}
export {
  start,
  upload
};

当我运行代码时，我从请求处理程序开始收到以下错误

PS C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive node> node -r esm 
index.js
Response ready
Request for /upload recieved
About to route a request for /upload 
Request handler 'upload' was called  
Request for /start recieved
About to route a request for /start 
Request handler 'start' was called  
ReferenceError: document is not defined
at Object.start (C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive 
node\requestHandlers.js:5:15)
at route (C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive 
node\router.js:4:28)
at Server.onRequest (C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive 
node\server.js:11:8)
at Server.emit (events.js:314:20)
at Server.EventEmitter.emit (domain.js:486:12)
at parserOnIncoming (_http_server.js:781:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)
PS C:\Users\paullaster-geek\OneDrive\Desktop\Projects\Dive node>

标签： javascripthtmlforms

解决方案

一个网站通常由两个主要部分组成，服务器端逻辑（后端）和客户端逻辑（前端）。两种逻辑通常彼此分开执行，因此只能通过网络通道进行通信，而不能通过逻辑进行通信。这意味着它们不会像传统的程序逻辑那样共享变量或数据。

从您共享的代码中，您似乎正在尝试在服务器端应用程序上执行客户端逻辑。JavaScript 中的document对象用于访问和操作 HTML 页面中的 DOM。服务器端应用程序无权访问此document对象，因此其访问权限无效。在服务器端应用程序的上下文中，文档对象是未定义的。

您可以通过客户端逻辑调用这些函数来完成这项工作。尝试注册一个函数调用以针对按钮单击进行上传和启动函数。这很可能会奏效。

推荐阅读