Question

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

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

这是hbs的结构：

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

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

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

Answer 1

这里的问题是您每次都要让浏览器请求新资源。这会触发您的模板并每次都提供一个全新的页面。

您希望创建一个返回JSON的快速端点，然后使用AJAX（在jQuery中找到）或类似的库中向该端点发送请求。通过这种方式，您可以调用Web服务器，express可以以JSON格式返回一些数据（res.json({})，然后您的前端可以解释该响应并决定如何在DOM上显示它。

这种部分更新是您开始需要前端JS以及返回JSON的侧面编程端点的地方。这通常是像Vuejs和Angular这样的大型前端框架茁壮成长的地方，但是如果您对这类事情不熟悉，我建议使用jQuery对您的服务器进行HTTP调用并返回JSON到前端。

Answer 2

我在另一个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>

在your.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'，函数（req，res）{ res.status（200）; res.header（“ Content-Type”，“ text / html”）; res.render（'partials / addtest'，{title：“添加测试”}））; }）;
客户端：在客户端文件中，添加一个简单的获取请求：

$（'＃add-new-test'）。click（function（event）{ $ .get（'/ addtest'）。then（function（data）{ $（'＃main'）。html（data）; }）; }）;

通过这种方式，当您使用相同的地址（即本例中为 / addtest ）发出get请求时，客户端会在视图内部添加部分代码，而不会全部刷新。

注意：请记住，如果您需要部分文件file.js，请使用以下文件加载文件：

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

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

express.js如何更新UI而不使用把手刷新所有页面

2 个答案: