Question

我有一个复选框，按下时调用一个执行GET请求的函数。根据选择，我想在同一页面上显示额外的复选框。目前这是我到目前为止的代码：

客户端

function selectedHouse(house)
{
   if(house.checked){
      $.get('/', {data: house.value});
   }
}

服务器端

var routing = function (nav, houses) {
    router.route('/')
        .get(function (req, res) {
            var rooms = [];
            rooms = getRooms(req.query.data);
            console.log(rooms);

            res.render('index', {
                title: 'Independent cleaner',
                nav: nav,
                houses: houses,
                roomsForHouse: rooms
            });
        });
    return router;
};

第一次加载页面时，它会加载正确的标题，导航和房屋。当在客户端执行该功能时，我会回到房子的相关房间，并且我试图填充我在视图上显示的roomsForHouse变量。

问题是视图没有呈现roomsForHouse变量。因此，一旦页面加载就会调用GET请求，而第二次执行函数时会调用GET请求。这可以实现吗？

Answer 1

这有点复杂。你需要使用ajax。 EJS是服务器端模板（因为您正在使用它们），因此您将需要使用jQuery进行调用并更新已经呈现的页面。

服务器您的服务器需要一个提供JSON数据的路由。现在你正在渲染整个页面。所以：

app.get('/rooms/:id', function (req, res) { // Get the house info from database using the id as req.params.id ... // Return the data res.json({ rooms: 2 ... }); });

<强>客户端

一旦用户选择了房子，使用jQuery就会调用你的json路径。

function selectedHouse(house) { if(house.checked){ // Pass some identifier to use for your database $.ajax({ type: 'GET', url: '/rooms/' + house.id, success: function(data) { // Update the element - easiet is to use EJS to make sure each house has an id/class with the id in it // Given an ID of 2 this says find the div with class house_2 and updates its div with class room to the number of rooms $('.house_' + house.id + ' .rooms').text(data.rooms); }); } }

这更像是伪代码，但应该让你走上正轨。

Answer 2

res.render无法重新呈现视图，在第二次刷新页面时需要使用javascript来替换html。这不是很好的解决方案

$.get("/",function(html){

 document.open();

document.write(html);

document.close();

});

为了更好，你应该使用另一个路由器来渲染你想要改变的DOM

使用EJS和Express

2 个答案: