如何在同一GET请求中呈现文件并将数据发送到页面

Posted 2021-04-12

我在客户端使用angularjs，在服务器端使用experss.js，我想呈现一个页面，并在相同的get请求中将数据发送到该页面（以填充表格）

我曾尝试使用ejs引擎在服务器端填充表格，然后呈现页面，但是此解决方案的问题在于客户端（angularjs）无法访问或操纵数据。其他解决方案是（微分）是

1. 发出请求以获取有关科学方面的信息
2. 在服务器端呈现页面
3. 从客户端发出另一个获取请求以获取数据
4. 将数据从服务器发送到客户端

问题是它包含两个get请求。有没有一种方法可以渲染页面并在一个get请求中发送数据？

我这样做是为了使现场加载更加高效。我可以通过一个GET请求获得更高的效率吗？

答案

不，你不能。您只能对给定的请求进行单个响应。浏览器期望的是html文档，或者期望的是JSON，但同时提供它们既没有意义。但是您可以渲染页面并同时发送数据：

res.render('reports',{data:json});

然后访问新呈现的页面中的那些数据。

或者，您可以在拨打电话时发送一个标志，然后根据该标志来决定是呈现还是发送。

或者理想情况下，它需要两条单独的路线，一个是散布json，另一个是渲染视图。否则，您可以传递url参数，具体取决于您返回json还是呈现视图。

router.get('/reports/json', function(req,res){
   var data = JSON_OBJECT;
   res.send(data);
});

router.get('/reports', function(req,res){
   var data = JSON_OBJECT;
   res.render('path-to-view-file', data);
});

另一答案

要在没有第二个服务器请求的情况下访问AngularJS应用程序中的数据，请包含.value脚本：

<script>
    angular.module("myApp").value("myData",
         <JSON data here>
    }
</script>

然后在控制器中注入：

app.controller("myCtrl", function($scope, myData) {
    $scope.data = myData;
})

有关更多信息，请参阅

• AngularJS angular.module API Reference - .value method