如何使用 jquery、express 和车把创建无刷新页面？答案

【问题标题】：How to create a no refresh page using jquery, express and handlebars?如何使用 jquery、express 和车把创建无刷新页面？
【发布时间】：2021-09-24 11:12:47
【问题描述】：

我正在学习 express JS，我的问题是：我想使用 NodeJS 创建两个页面，使用把手作为模板引擎，但我希望第一页应该使用 res.render('home') 发送，第二页应该是由 jQuery 使用 ajax 调用来表达并从 express 服务器获取呈现为 HTML 的响应，然后加载关于页面而不刷新。我尝试使用this StackOverflow question 中显示的方法，但我不满意。请指导我如何实现它。

【问题讨论】：

标签： javascript jquery node.js express handlebars.js

【解决方案1】：

所以，伙计们，我终于找到了我的问题的答案，我希望它对你也有帮助。一步一步按照这些步骤使用 jquery、express 和 handlebars 创建一个无刷新网站。只是一个结合多种事物的教程。

1.创建文件夹名称 mywebsite

2。运行npm init 并安装以下依赖项

    "express-handlebars": "^5.3.4",
    "handlebars": "^4.7.7",
    "hbs": "^4.1.2"

3.现在使用以下代码创建一个main.js 文件

const express = require('express')
const app = express();
const static_path = __dirname + "/static"
const hbs = require("hbs");

app.set('view engine', 'hbs');
app.set("views", __dirname + "/pages");

app.use(express.static(static_path));

var exhb = require('express-handlebars').create();

app.get("/", (req, res) => {
    res.render('index', { title: "Home Test", pagename: "This is my Home page" });
});

app.get('/getabout', (req, res) => {
    exhb.render("pages/about.hbs", { title: "About US page", body: "Body" }).then((html) => {
        res.send({ data: html });
    }).catch((err) => {
        console.log(err);
    })
});

app.listen(8080, 'localhost', () => {
    console.log("listening at http://localhost:8080")
})

4.现在创建一个包含文件index.js 的静态文件夹并编写以下代码

async function callAbout() {
    let data = await fetch('http://localhost:8080/getabout');
    let response = await data.json();
    console.log(response);
    $("html").html(response['data']);
    window.history.pushState(
        'about us',
        'About us',
        '/aboutus');
}

5.现在创建一个 pages 文件夹，其中包含两个文件 index.hbs 和 about.hbs index.hbs 将包含以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
</head>
<body>
    <h1>{{pagename}}</h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint assumenda aliquam dolor consectetur recusandae possimus illo praesentium atque nihil exercitationem!
    <button onclick="callAbout()">About us</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>

about.hbs 将包含以下代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
</head>

<body>
<h1>This is my about us page created using NODE</h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo accusamus autem accusantium suscipit, minima blanditiis ducimus quisquam fugiat, eligendi repellendus provident quasi dolores nesciunt laboriosam commodi illum repellat error eos.
{{body}}
</body>

</html>

6.现在运行node.js 并单击About Us 按钮，看看神奇的效果

希望本教程可以帮助任何尝试完成新事物的人

【讨论】：