Nodejs ajax 渲染模板 返回的问题

Nodejs ajax 渲染模板 返回的问题

是否有方法能实现我的这个想法

客户端向服务端发送AJAX请求,服务端接收请求,从数据库读取数据,然后渲染模板,最后把渲染好的模板作为AJAX的返回值,再返回给客户端,不使用res.render方法渲染模板,而是用res.send方法将渲染好的html代码返回给客户端.

在线等…我的想法可能有些单纯…以前都是服务端给数据…客户端用js来给数据套html代码的…

5 回复

当然可以！你的想法是可行的。通过Node.js处理AJAX请求，并渲染模板后将其作为HTML字符串返回给客户端，这是一种常见的做法。这里我将提供一个简单的示例来展示如何实现这一过程。

示例代码

假设你正在使用Express框架，首先需要安装一些必要的依赖包：

npm install express ejs

接下来是服务器端的代码：

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

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

// 模拟数据库查询
const getDataFromDatabase = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([
                { id: 1, name: 'Alice' },
                { id: 2, name: 'Bob' }
            ]);
        }, 500);
    });
};

// 处理AJAX请求
app.get('/get-data', async (req, res) => {
    try {
        const data = await getDataFromDatabase();
        // 渲染模板
        const renderedHtml = app.render('template', { users: data });
        // 将渲染后的HTML作为响应返回
        res.send(renderedHtml);
    } catch (error) {
        console.error(error);
        res.status(500).send('Internal Server Error');
    }
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

在这个例子中，我们创建了一个简单的Express应用，设置视图引擎为EJS，并定义了一个路由/get-data来处理AJAX请求。我们模拟了一个数据库查询操作，并将结果传递给模板进行渲染。

模板文件template.ejs可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User List</title>
</head>
<body>
    <h1>User List</h1>
    <ul>
        <% users.forEach(user => { %>
            <li><%= user.name %></li>
        <% }) %>
    </ul>
</body>
</html>

客户端代码

在客户端，你可以使用jQuery或其他库来发送AJAX请求：

$(document).ready(function() {
    $.ajax({
        url: '/get-data',
        type: 'GET',
        success: function(response) {
            $('#content').html(response);
        },
        error: function() {
            alert('Failed to load data.');
        }
    });
});

这段代码会在页面加载完成后向服务器发送AJAX请求，并将返回的HTML插入到ID为content的DOM元素中。

通过这种方式，你可以实现在服务器端渲染HTML并将其返回给客户端，而不是让客户端自己处理数据和模板。


调用模板引擎自己的 render 方法

完全可行啊，了解一下PJAX

我有些不大明白您说的 能详细点吗

当然可以。你可以通过在Node.js后端渲染模板并将其作为字符串返回，然后再由前端处理。以下是一个简单的示例，展示如何实现这一过程。

示例代码

后端（Node.js）

首先，你需要安装一些必要的库，例如express和ejs。

npm install express ejs

接下来，创建一个简单的Express服务器：

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

const app = express();

app.get('/getData', (req, res) => {
    // 模拟从数据库获取数据
    const data = { title: 'Hello World', content: 'This is a test.' };

    // 渲染模板
    const template = fs.readFileSync('./template.ejs', 'utf-8');
    const renderedHTML = ejs.render(template, data);

    // 返回渲染后的HTML字符串
    res.send(renderedHTML);
});

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

在这个例子中，我们使用了ejs模板引擎来渲染模板，并将结果作为字符串返回。

前端（JavaScript）

假设你有一个简单的HTML页面和一个AJAX请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Page</title>
</head>
<body>
    <div id="content"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: '/getData',
                method: 'GET',
                success: function(response) {
                    $('#content').html(response);
                }
            });
        });
    </script>
</body>
</html>

解释

  1. 后端：

    • 创建一个简单的Express应用。
    • 在/getData路由上监听GET请求。
    • 模拟从数据库获取数据。
    • 使用EJS模板引擎渲染模板，并将结果作为字符串返回。

  2. 前端：

    • 使用jQuery发送AJAX请求到/getData。
    • 当请求成功时，将返回的HTML字符串插入到页面中的#content元素中。

这样，你就可以在服务端渲染模板并将结果返回给客户端，而不需要在客户端重新生成HTML。

回到顶部