使用EJS和Express刷新页面部分 [英] Refresh section of a page using EJS and Express

问题描述

我有一个复选框，当按下时调用一个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（'指数'，{
标题：'独立清洁'，
 nav：nav，
房屋：房子，
 roomsForHouse：rooms 
}）; 
} ）; 
返回路由器; 
}; 
  

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

问题是视图不渲染roomForHouse变量。因此，GET请求在页面加载后被调用，第二次在函数执行时被调用。可以实现吗？

解决方案

有点复杂。您需要使用ajax来进行此操作。 EJS是服务器端模板（正如您使用的那样），因此您需要使用jQuery进行调用并更新已经呈现的页面。

服务器
您的服务器将需要一个传递JSON数据的路由。现在你正在呈现整个页面。所以：

  app.get（'/ rooms /：id'，function（req，res）{
 
 //使用id作为req.params.id从数据库获取房屋信息
 ... 
 
 //返回数据
 res.json（{
房间：2 
 ... 
}）; 
}）; 
  

客户

使用jQuery在用户选择房子后调用json路由。

  function selectedHouse（house）
 {
 if（house.checked）{
 //传递一些标识符用于您的数据库
 $ .ajax（{
 type：'GET'，
 url：'/ rooms /'+ house.id，
 success：function（data）{
 //更新元素 -  easiet是使用EJS来确保每个房子都有一个id / id in it 
 //给定一个ID为2的这个表示发现div与class house_2并更新其div与课室到房间数
 $（'。house_'+ house.id +'文本（data.rooms）; 
}）; 
} 
} 
  

这是更多的伪代码，你在正确的轨道上。

I have a checkbox that when pressed call a function that does a GET request. Based on the selection I want to display extra checkboxes on the same page. At the moment this is the code I have so far:

Client side

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

Server side

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;
};

The first time the page loads, it loads with the correct title, nav and houses. When the function is executed on client side, I get back the related rooms for the house and I'm trying to populate the roomsForHouse variable which I'm displaying on the view.

The problem is that the view doesn't render the roomsForHouse variable. So the GET request is called once the page loads and a second time when the function executes. Can this be achieved?

解决方案

It's a bit more complex. You'll need to use ajax for this. EJS is server side templates (as you are using them) so you'll want to use jQuery to make the call and update your already rendered page.

Server Your server will need a route that delivers JSON data. Right now you are rendering the entire page. So:

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
    ...
  });
});

Client

Using jQuery make a call to your json route once the user selects the house.

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);  
      });
   }
}

This is more of pseudo code then anything but should put you on the right track.

这篇关于使用EJS和Express刷新页面部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！