在Node.js中通过HTML-buttons调用JS函数有更简单的方法吗?

vbopmzt1  于 2023-06-22  发布在  Node.js
关注(0)|答案(2)|浏览(172)

我正在尝试添加一个我自己编写的JavaScript函数,到一个HTML按钮,我也做了自己。我在调用document.getElementById()函数时遇到问题,因为我正在使用Node.js。我在其他论坛上看到,你可以用JSDOM解决这个问题。现在我有问题了。还有比JSDOM方式更简单的解决方案吗?我也不能真正使用JSDOM,因为它需要一个新的安装,这在团队时间上是不可能完成的。
JS代码

const fetch = require("./fetch");
const jsdom = require('jsdom');
const http = require('http');
const fs = require('fs');
var url = require('url');
const  port = 3000


const server = http.createServer(function(req, res) {
    
    var q = url.parse(req.url);
    var filename = "." + q.pathname;
    console.log(req.url)

    if (req.url == '/') {
        res.writeHead(301, { Location: 'http://localhost:3000/frontpage.html' })
        res.end()
        } else {
            res.writeHead(200, { 'Content-Type': 'text/html' })
            fs.readFile(filename, function(error, data) {
                if(error) {
                    res.writeHead(404)
                    res.write('Error: File Not Found')
                } else {
                    res.writeHead(200, { 'Content-Type': 'text/html' })
                    res.write(data)
                }
                return res.end()
            })
    }
})

server.listen(port, function(error) {
    if (error) {
        console.log('Something went wrong', error)
    } else {
        console.log('Server is listening on port ' + port)
    }
})




const { JSDOM } = jsdom;

const { document } = (new JSDOM('frontpage.html')).window;
global.document = document;
var button = document.getElementById("meinButton")
button.addEventListener("click", fetch.register_medication);

HTML元素

<script scr="fetch.js"></script>
    
    <button id="meinButton">Klick mich!</button>
jtjikinw

jtjikinw1#

看起来你把服务器端代码和客户端代码弄混了。NodeJS用于服务器;客户端活动(如向按钮添加事件处理程序)应该在客户端中运行,而不是嵌入在节点脚本中。这可能会让人感到困惑,因为两者都是用同一种语言编写的(有不同的库可用),一些现代工具链和库在概念上模糊了服务器端和客户端代码之间的区别-但它们在完全不同的上下文中执行,不能混合。
代码的第一部分是针对节点服务器的,将在主机上执行;看起来它正在做的是检查(服务器的)文件系统是否有与url匹配的路径,使用fs阅读它们,并将内容发送到浏览器:

const server = http.createServer(function(req, res) {
    var q = url.parse(req.url);
    var filename = "." + q.pathname;
    if (req.url == '/') {
        res.writeHead(301, { Location: 'http://localhost:3000/frontpage.html' })
        res.end()
        } else {
            res.writeHead(200, { 'Content-Type': 'text/html' })
            fs.readFile(filename, function(error, data) {
                if(error) {
                    res.writeHead(404)
                    res.write('Error: File Not Found')
                } else {
                    res.writeHead(200, { 'Content-Type': 'text/html' })
                    res.write(data)
                }
                return res.end()
            })
    }
})

server.listen(port, function(error) {
    if (error) {
        console.log('Something went wrong', error)
    } else {
        console.log('Server is listening on port ' + port)
    }
})

(我不是Node方面的Maven,所以我不确定这是否是最好的方法,但看起来应该可以工作。
不过,下一部分是纯JavaScript。它应该在浏览器中运行,而不是在服务器上运行:

var button = document.getElementById("meinButton")
button.addEventListener("click", fetch.register_medication);

最简单的方法是将其存储在自己的.js文件中,与节点脚本分开,并让每个需要它的网页使用<script src="/path/to/clientside.js">加载它。(这个路径应该是相对于web根目录的,就像对于图像或css文件一样;它将不会与您的nodejs路径相同)。Node本身不需要知道关于这个.js文件的任何信息;它会被浏览器直接请求并执行。
jsdom是Node的一部分,用于在将html发送到浏览器之前执行DOM操作,这在某些情况下很有用,但对于比您在这里处理的更复杂的用例。您可以跳过所有这些,直接进入getElementById的乐趣。
(In你提到的一条评论,试图分离js,但得到错误“ReferenceError:document is not defined”--这是一条Node错误消息,表明您仍在尝试在服务器上而不是在浏览器中运行脚本。确保是网页本身而不是Node请求任何应该在浏览器中运行的JS。)

9njqaruj

9njqaruj2#

我不确定您在这里使用JSDOM要做什么,但从您的问题来看,我认为您只是希望页面上的按钮发布到API
然后,在节点应用响应请求的地方,您可以检测REST API调用,并在那里执行以下操作:

if (req.url == '/') {
  // ...the stuff here is fine as is
}else if (req.url.indexOf("register_medication") == 0){
  // call your behaviour here
}

如果你想为用户提供带有修改的页面,你需要在提供文件之前处理好这一点,但我不认为这是你想要的?

相关问题