发送 JSON 对象数据到 HTML 端？
我已经使用 Node JS 函数制作了一个 JSON 对象，现在我想将这个 JSON 对象发送到 HTMl 端，以便我可以用数据制作一个表格。但是，它没有被发送过来，因为我对 Node JS 很陌生，我不确定如何发送这个 JSON 对象。
当我使用 Express 发送对象并在我的 HTML 文件的脚本中使用 fetch 时，Chrome 开发人员工具中的 console.log（在网络选项卡下）显示为挂起，而来自 console.log 的数据不显示。我也检查了 Postman，对本地主机 URL 的请求只是显示它在“发送请求”。
const http = require("http");
const fs = require("fs");
const url = require("url");
const express = require("express");
const app = express();
app.use(
express.urlencoded({
extended: true,
})
);
app.use(express.json());
const server = http.createServer((req, res) => {
const { query, pathname } = url.parse(req.url, true);
if (pathname == "/") {
res.writeHead(200, { "Content-type": "text/html" });
const outMap = Array.from(teams)
.map((el) => homepageTeamLister(teamsListHTML, el))
.join("");
res.end(outMap);
} else if (pathname == "/player") {
//res.writeHead(200, { "Content-type": "text/html" });
app.get("/test", function (req, res) {
res.setHeader(
"Access-Control-Allow-Origin",
"http://localhost:9000/test"
);
res.setHeader("Access-Control-Allow-Methods", "GET");
const myObj = { name: "John", age: 30 };
res.send(myObj);
});
}
});
server.listen(9000, "127.0.0.1", () => {
console.log("listening on port 9000");
});
我的 HTML 脚本代码：
console.log("Entered Script");
fetch('/test')
.then(res => res.json())
.then(data => {
console.log("Hi? : " , data); // { name: "John", age: 30 }
})
.catch(console.error);
$.ajax({
url: 'http://localhost:9000/test',
complete: function(data) {
console.log(data);
}
我已经尝试了 fetch 功能，并使用了 AJAX，但是这两种尝试都没有用。
回答如下：看来您的 Express.js 和 HTML 代码设置不正确。
你可以在这里预览最终代码
将下面的HTML代码放置到
public/index.html<html>
<script src='https://code.jquery/jquery-3.6.4.min.js'></script>
<script>
console.log("Entered Script");
fetch("/test")
.then(res => res.json())
.then(data => {
console.log("Hi? : ", data); // { name: "John", age: 30 }
})
.catch(console.error);
$.ajax({
url: "https://xise6v-9000.csb.app/test",
complete: function(data) {
console.log(data?.responseText);
}
});
</script>
</html>
更新您的 app.js 文件以类似于下面的代码。我已经包含评论以提供更多背景和理解：
const express = require("express");
const app = express();
app.use(
express.urlencoded({
extended: true
})
);
// serve the html file under the public folder
app.use(express.static("public"));
app.use(express.json());
// correct way to declare the API
app.get("/test", function(req, res) {
res.setHeader(
"Access-Control-Allow-Origin",
"http://localhost:9000/test"
);
res.setHeader("Access-Control-Allow-Methods", "GET");
const myObj = {name: "John", age: 30};
res.send(myObj);
});
// use app listen instead
app.listen(9000, "127.0.0.1", () => {
console.log("listening on port 9000");
});
您可以通过此链接预览结果。