Обновить раздел страницы с помощью EJS и Express

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

В первый раз загружает страницу, он загружает с правильным названием, нав и дома. Когда функция выполняется на стороне клиента, я возвращаю связанные комнаты для дома, и я пытаюсь заполнить переменную roomForHouse, которую я показываю на виду.

Проблема в том, что представление не отображает переменную roomForHouse. Таким образом, запрос 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 
    ... 
    }); 
}); 

Client

Использование 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 вы хотите изменение