javascript - express.js 如何在不使用 Handlebars 刷新所有页面的情况下更新 UI

Question

这是我第一次使用 express.js 和 Handlebars。
我需要自动填写此字段:<input type="text" id="myInput" autocomplete="on" placeholder="Search here..."> .当每个人都对这个文本进行数字化时，我需要在不刷新页面内容的情况下进行 POST 和 GET 之后。问题是，当我执行 GET 时，Handlebars 会刷新所有页面。这是我使用的命令:

res.render('home',{ items:typeOfCategory}); 

这是hbs的结构:

{{#if items}}
<ul>
{{#each items}} 
<li>{{this.title}}</li>   

{{/each}}
</ul>
{{/if}}

我的问题是:如何避免刷新所有页面？
谢谢

Answer 1

我在另一个 question 中读过类似的内容.基于此tutorial : 我找到了所有问题的答案。
本教程解释了如何使用管理客户端和服务器端的 PJAX 库。
感谢 3 行代码，您无需重新加载页面即可获得快速导航。

从 jQuery-pjax page 安装客户端库

在发送请求的 html 页面中添加:<a href='/yourLink' data-pjax='main'>YourLink</a>

在哪里 main是将内容更改的 div。在我的情况下是:

 <div id="main" class="main">                    
       {{{body}}}                    
 </div>

在你的 .js 文件中添加 $('a[data-pjax]').pjax();此命令“只需在每个包含数据属性‘data-pjax’的元素上调用 pjax 扩展”

使用以下命令安装内部表达依赖:npm install --save express-pjax

设置你的服务器:

var app = express();
var pjax = require('express-pjax');

...

app.use(pjax())

替换正常渲染:

res.render('index', {title: "Index"});
和

res.renderPjax('index', {title: "Index"});

更新
或者，您可以获得相同的结果。考虑项目的结构如下:

views
  |-> partials
  |      |-> addtest.hbs
  |
  |-> index.hbs

例如，在您的 index.hbs 中有一个带有不同项目的侧边栏的图像，以这种方式描述:

<li>
    <a href="#testDB" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
   <img src="../img/database-data.svg" class="svg icon">Test</a>
    <ul class="collapse list-unstyled select-specific" id="testDB">
        <li value="addTest" class=" ">
            <a href="#" id="add-new-test">Add Test</a>
        </li>
         ....
         ....
    </ul>
 </li>

在 partials 目录中，您有一个简单的表单。
现在要管理表单，您必须执行两项操作:

服务器端 :要在不刷新页面的情况下从一个部分切换到另一个部分，请指定:

router.get('/addtest', function (req, res) {
res.status(200);
res.header("内容类型", "text/html");
res.render('partials/addtest', {title: "添加测试"});
});

客户端 :在您的客户端文件中，添加一个简单的获取请求:

$('#add-new-test').click(function (event) {
$.get('/addtest').then(function (data) {
$('#main').html(数据);
});
});

这样，当您使用相同的地址(即在本例中为/addtest)发出 get 请求时，客户端会在您的 View 中添加一部分代码，而不会全部刷新。

注意 :请记住，如果您在部分文件中需要一些 file.js 来加载文件，请使用以下命令:

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

这用于避免: “Synchronous XMLHttpRequest on the main thread is deprecated…”因为调用是异步的。更多 info..