AJAX (Get、Express、Node JS)用于检索JSON和HTML数据
AJAX (Get、Express、Node JS)用于检索JSON和HTML数据
提问于 2021-03-25 03:29:22
我正在做一个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来检索JavaScript & HTML文件。
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 + '.');
})回答 1
Stack Overflow用户
发布于 2021-03-25 04:09:18
变量dataList定义为const，应为let或var。此外，list变量没有在任何地方定义。
也许检查web浏览器控制台会显示代码中的任何其他错误。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66788057
复制相关文章
相似问题
腾讯云开发者
