我甚至在使用后端数据之前，都试图使模板工作于虚拟数据。
每当单击按钮时，我计划用服务器响应中的实际数据替换客户端JavaScript中的伪数据。现在，我正在使用Express + Node.js服务器。
[当我运行'node Submit_form.js'，然后转到http://localhost:8000/search_results_page并单击“提交”按钮时，该网页永远不会呈现传递到模板中的数据。结果，该网页仅显示“支出”。
但是，当我转到静态文件../search_results_page.html并单击“提交”按钮时，该页面会正确呈现传递到模板中的数据。该页面显示“乔花6。”
我不确定后端（或前端）要进行哪些更改，以便正确呈现数据。
我的文件search_results_page.html看起来像这样：
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/jquery-serializejson/jquery.serializejson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/mgalante/jquery.redirect/master/jquery.redirect.js"></script>
<link rel="shortcut icon" href="#" />
<script src="submit_form.js"></script>
</head>
Search Results List <br><br>
Each result first displays the ID and then the relevance score (in decreasing order).<br><br>
<input type="submit" id="submitButton" value="Submit">
<div id ="results_div">
</div>
<script type="text/html" id="template">
<ul id="results_list">
{{#results_list}}
<br><br>
<li><a href="https://www.ncbi.nlm.nih.gov/books/{{id}}">{{id}}</a> {{name}} {{relevance_score}}</li>
{{/results_list}}
{{^results_list}}No results for results list.{{/results_list}}
</ul>
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#submitButton").click(function() {
var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
};
template = $('#template').html();
var output = Mustache.render("{{title}} spends {{calc}}", view);
$('#results_div').append(output);
});
});
</script>
</html>
并且我包含在submit_form.js中的服务器代码是：
var express = require('express')
var path = require('path')
var http = require('http'); // this is new
var mustache = require("mustache");
var fs = require("fs")
var router = express.Router()
var app = express();
var engines = require('consolidate');
app.engine('html', engines.hogan); // tell Express to run .html files through Hogan
app.set('views', __dirname); // tell Express where to find templates, in this case the '/templates' directory
app.set('view engine', 'html'); //register .html extension as template engine so we can render .html pages
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'static')));
app.listen(8000, () => {
console.log('Example app listening on port 8000!')
});
app.get('/', (req, res) => {
res.render('search_engine.html', {'results_list':[]});
});
app.get('/search_results_page', (req, res) => {
res.render('search_results_page.html', {'results_list':[]});
});