【发布时间】：2021-06-21 13:51:39
【问题描述】：
我正在开发一个 Web 开发项目，我可以使用 AJAX、Get、Express 和 Node JS 从 JS 文件中检索 JSON 和 HTML 数据。
当用户单击其中一个列表时，我希望 JSON 和 HTML 数据显示在我的 HTML 文件中。我创建了所有模板，但由于未知原因，它无法正常工作..
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>J MEDICAL | SURREY</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" id = "title" href="#">J MEDICAL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MEDICATION</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
ABOUT
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">RESOURCES</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class = "container">
<div id = "question"><h3>INFORMATION</h3></div>
<div id = "faq">
<ul id = "questions">
<li><a href="" id="opening-hour">CLINIC OPENING</a></li>
<li><a href="" id="vaccine-types">COVID-19 VACCINES WE CARRY</a></li>
<li><a href="" id="location">OTHER MEDICAL CENTRES</a></li>
<li><a href="" id="not-permitted">TYPES OF RESTRICTION OF ACQUIRING VACCINE</a></li>
</ul>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<script src="main-ajax.js"></script>
<!--Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
JavaScript 文件中的 JSON 和 HTML 数据
const openingInfo = {
"Monday": "9-5",
"Tuesday": "9-5",
"Wednesday": "9-5",
"Thursday": "9-5",
"Friday": "11-5",
"Saturday": "CLOSED",
"Sunday": "CLOSED"
}
const openingInfo = [
{
"day": "Monday",
"hours": "9-5"
},
{
"day": "Tuesday",
"hours": "9-5"
},
{
"day": "Wednesday",
"hours": "9-5"
},
{
"day": "Thursday",
"hours": "9-5"
},
{
"day": "Friday",
"hours": "11-4"
},
{
"day": "Saturday",
"hours": "CLOSED"
},
{
"day": "Sunday",
"hours": "CLOSED"
}
]
const vaccineTypes = "<ol><li>Moderna - 18 years older</li><li>Pfizer-BioNTech - 16 years older</li><li>AstraZeneca - 18 years older</li><li>Janssen - 18 years older</li></ol>";
const restrictInfo = "<ul><li>Individuals who have travelled outside of Canada less than two weeks prior.</li><li>Been in contacted with person(s) with COVID-19.</li><li>Have been infected with COVID-19 less than 2 months prior.</li><li>Any signs of symptoms (cough, fever, diahrrea)</li><li>Participated in any gathering of more than 10 people.</li></ul>";
使用 AJAX、GET 和 Node JS 检索 JSON 和 HTML 文件的 JavaScript 文件。
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const app = express();
const { JSDOM } = require('jsdom');
const fs = require("fs");
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use('/js', express.static('files'))
app.use('/css', express.static('files'))
app.get("/", (req, res) => {
const html = fs.readFileSync('./files/main.html', "utf8");
res.send(html);
});
app.get("/retrieve-AJAX-info", (req, res) => {
const formatOfResponse = req.query['format'];
const dataList = null;
if(formatOfResponse == 'opening-hour') {
res.setHeader('Content-Type', 'text/html');
dataList = lists.opening-hour();
res.send(dataList);
} else if(formatOfResponse == 'vaccine-types') {
res.setHeader('Content-Type', 'application/json');
dataList = lists.vaccine-types();
res.send(dataList);
} else if(formatOfResponse == 'location') {
res.setHeader('Content-Type', 'application/json');
dataList = lists.location();
res.send(dataList);
} else if(formatOfResponse == 'not-permitted') {
res.setHeader('Content-Type', 'application/json');
dataList = lists.not-permitted();
res.send(dataList);
} else {
res.send({msg: 'Wrong format!'});
}
});
app.use(function (req, res, next) {
res.status(404).send("<html><head><title>Page not found!</title></head><body><p>Nothing here.</p></body></html>");
})
// RUN SERVER
let port = 8000;
app.listen(port, function () {
console.log('You are listening to port ' + port + '.');
})
【问题讨论】：
-
删除
app.use(function (req, res, next) {直到修复，它掩盖了问题，也是所有错误的处理程序，而不仅仅是 404 错误。你不能使用const，然后重新分配它。lists.opening-hour();、lists.vaccine-types()或lists.not-permitted()也不起作用 -
那么，我是否应该删除 app.use(function (req, res, next) { 中的所有内容，包括运行服务器部分 (let port = 8000;)？
-
不把它注释掉，运行服务器部分不在里面，你也没有在任何地方设置
lists -
lists.not-permitted()等价于undefined.undefined-undefined()，一旦添加列表，最有可能是lists['not-permitted']也就是等价于访问let lists = {'not-permitted': []}，只是基本的js
标签： html json ajax express get