javascript - 如何将javascript控制台输出显示到alert()中
问题描述
我的老师每天都在互联网上为我们寻找随机的事实,然后她在黑板上写字,我们每天上她的课都能看到。我正在尝试制作一个超级简单的网站,一旦单击按钮,页面顶部就会出现警报。每当我无法弄清楚如何使控制台进入警报时。我查看了另一个不同的 Stack 问题,但我并没有真正理解它。这是我的完整代码。对不起,我刚开始使用 javascript,对它来说简直是再熟悉不过了。提前致谢!
const express = require("express");
const app = express();
app.use(express.static("public"));
app.get("/", (request, response) => {
response.sendFile(__dirname + "/facts.html");
});
const listener = app.listen(process.env.PORT, () => {
console.log("Your app is listening on port " + listener.address().port);
});
var fact = require('random-fact');
fact();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Generate Random Facts</title>
</head>
<body>
<h1>Fact Generator</h1>
<br><br><br><br>
<script>
function test() {
alert('fact');
}
</script>
<input type="button" onclick="test()" value="Generate Random Fact!">
</body>
</html>
解决方案
如果我没有正确理解您的代码,我很抱歉,但根据我对第一个代码块的理解,NodeJS 正在根 url 上发送一个文件。那个根文件就是你想要提醒这个“随机事实”的东西
但是,随机事实数据存储在var fact = require("random-fact")
NodeJS 是一个 JavaScript 运行时环境。意思是在浏览器之外和服务器中执行 JavaScript 代码的地方。NodeJS 不像普通 JS,您可以访问 BOM 和 DOM。
但是,使用 express 您可以设置所谓的端点。该端点会将每个请求的数据发送到您可以在前端设置的每个路由。
首先,我假设该fact()
函数返回一些数据。我们将设置一个端点:
app.get('/random-facts', (req, res) => res.send(fact()));
每当我们向它发送 get 请求时,/random-facts
它都会执行该函数并希望得到你想要的
在前端,我们需要执行所谓的 AJAX 请求。您向 API 发送请求的位置。就像您在浏览器中键入时所做的一样,您www.google.com
会发送一个获取请求。AJAX 请求可以通过请求变得更加复杂,GET
但那是为了别的。
我们将通过 JS 使用fetch API来做到这一点
在你的 html 上你可以做
<script>
fetch('http://localhost:3000/random-facts')
.then(response => response.json())
.then(data => alert(data));
</script>
这可能比您所知道的要先进一些,但我希望这会有所帮助
推荐阅读
- powershell - Powershell 中的值没有出现
- mysql - MySQL左连接以获取所有匹配项
- swift - 快速同时手势和缩放捏手势
- unit-testing - 如何对 Flutter/Dart 中是否调用 ChangeNotifier 的 notifyListeners 进行单元测试?
- javascript - 如何在从一侧到中心然后回到另一侧的滚动上为 2 个元素设置动画
- c# - 错误 XDG0008:通用 Windows 平台项目不支持 NumberBox
- javascript - 无法使用 mysql packege 从我的 node.js 应用程序连接到 db
- php - 让 HTML 表格在一行中显示
- node.js - Oracle DB 的 typeorm-model-generator 问题
- csv - ClientError:无法在 SageMarker 中解析 csv K-means