Nodejs中jquery ajax怎么加载ejs模板

Nodejs中jquery ajax怎么加载ejs模板

QQ图片20141221122910.jpg

就比如我想实现上图点击活动就加载event.ejs这个模板

3 回复

要实现在Node.js中通过jQuery的AJAX请求来加载EJS模板，你可以按照以下步骤进行：

1. 设置服务器端

首先，确保你的Node.js服务器能够处理EJS模板。假设你已经安装了express和ejs模块。

npm install express ejs

然后，在你的应用中设置EJS作为视图引擎，并创建一个路由来返回EJS模板的内容。

// app.js
const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/event.ejs', (req, res) => {
    res.render('event', { title: '活动详情', description: '这是某个活动的详细描述' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

2. 创建EJS模板

创建一个名为event.ejs的文件，位于views目录下。

<!-- views/event.ejs -->
<div class="event">
    <h2><%= title %></h2>
    <p><%= description %></p>
</div>

3. 使用jQuery发送AJAX请求

在客户端，你可以使用jQuery的$.ajax方法来请求服务器上的EJS模板，并将结果插入到页面中的某个元素中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node.js EJS Template Loading Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="load-event">加载活动</button>
<div id="event-content"></div>

<script>
$(document).ready(function() {
    $('#load-event').click(function() {
        $.ajax({
            url: '/event.ejs',
            type: 'GET',
            success: function(response) {
                $('#event-content').html(response);
            },
            error: function(error) {
                console.error('Error loading template:', error);
            }
        });
    });
});
</script>

</body>
</html>

解释

  • 服务器端：我们设置了Express应用，并定义了一个路由/event.ejs，当访问该路径时，服务器会渲染并返回event.ejs模板。

  • EJS模板：event.ejs文件包含了EJS模板语法，用于动态生成HTML内容。

  • 客户端：通过jQuery的$.ajax方法向服务器发起请求，获取EJS模板的渲染结果。成功后，将返回的HTML内容插入到ID为event-content的DOM元素中。

这样，当你点击按钮时，就可以通过AJAX请求动态加载并显示EJS模板的内容了。


AJAX -> LOAD URL -> 服务器端根据URL和query，渲染EJS -> 前端拿到标准HTML文档 -> 插入

要在Node.js中使用jQuery的AJAX请求来加载EJS模板，你需要首先确保后端已经正确设置了EJS模板引擎，并且能够处理AJAX请求。以下是一个简单的步骤和示例代码来帮助你实现这一功能。

后端（Node.js + Express）

首先，确保你已经在项目中安装了express和ejs：

npm install express ejs

然后，在你的Express应用中设置EJS作为视图引擎，并创建一个路由来处理AJAX请求：

const express = require('express');
const app = express();

// 设置视图引擎为EJS
app.set('view engine', 'ejs');

// 创建一个路由来处理AJAX请求
app.get('/event', (req, res) => {
    // 渲染event.ejs模板并返回结果
    res.render('event', { title: 'Event Page' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前端（HTML + jQuery）

接下来，创建前端页面并在其中添加jQuery代码来处理点击事件并发起AJAX请求：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="load-event">加载活动</button>

<div id="event-content"></div>

<script>
$(document).ready(function() {
    $('#load-event').click(function() {
        $.ajax({
            url: '/event',
            type: 'GET',
            success: function(data) {
                // 将接收到的数据插入到DOM中
                $('#event-content').html(data);
            },
            error: function() {
                alert('加载失败！');
            }
        });
    });
});
</script>

</body>
</html>

在这个例子中，当用户点击按钮时，jQuery会向服务器发起一个GET请求。服务器响应该请求并返回渲染后的event.ejs模板内容。最后，这个内容被插入到ID为event-content的<div>中。

确保你的event.ejs文件位于视图目录下（例如，如果你使用的是默认设置，那么它应该在views/event.ejs），并且包含你希望显示的内容。这样，你就可以通过AJAX请求动态加载EJS模板的内容了。

回到顶部