ejs包括点击
ejs include on click
我正在尝试在我的 node.js 项目中创建一个动态包含在 ejs 页面中的页面(使用 <%- include('partials/content') %>
)。
有没有一种方法可以为要包含的页面创建一个变量并在单击按钮时更改它?
假设您的 partials/content
文件包含如下内容:
<h1>Lorem ipsum dolor sit amet</h1>
文件名为 partials/content2
:
<h1>consectetur adipiscing elit<h1>
您的主模板文件会将部分内容用 <div>
和 ID result
包装起来,并包含一个脚本文件,其中您 select 使用 <div>
var $result = $('#result');
所以你把它放在一个变量中。然后你可以在你的按钮上注册一个点击处理程序。单击您请求所需的模板文件并替换内容。
主模板:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="result">
<%- include partials/content.ejs %>
</div>
<button id="change">change</button>
<script>
var $result = $('#result');
$('#change').click(function() {
$result.load('/content2');
});
</script>
</body>
</html>
那么你需要在后端有一个控制器,比如:
app.get('/content2', function (req, res) {
res.render('partials/content2');
});
我正在尝试在我的 node.js 项目中创建一个动态包含在 ejs 页面中的页面(使用 <%- include('partials/content') %>
)。
有没有一种方法可以为要包含的页面创建一个变量并在单击按钮时更改它?
假设您的 partials/content
文件包含如下内容:
<h1>Lorem ipsum dolor sit amet</h1>
文件名为 partials/content2
:
<h1>consectetur adipiscing elit<h1>
您的主模板文件会将部分内容用 <div>
和 ID result
包装起来,并包含一个脚本文件,其中您 select 使用 <div>
var $result = $('#result');
所以你把它放在一个变量中。然后你可以在你的按钮上注册一个点击处理程序。单击您请求所需的模板文件并替换内容。
主模板:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="result">
<%- include partials/content.ejs %>
</div>
<button id="change">change</button>
<script>
var $result = $('#result');
$('#change').click(function() {
$result.load('/content2');
});
</script>
</body>
</html>
那么你需要在后端有一个控制器,比如:
app.get('/content2', function (req, res) {
res.render('partials/content2');
});