2015-06-24 2 views
2

Я использую Node.js в качестве серверной части с экспресс-загрузкой и Twitter-бутстрапом в качестве front-end. На странице есть диалог с формой и кнопкой отправки; форма отправляется через вызов Jquery Ajax для не перезагружать страницу после ответа с сервера node.js. Вот три шага, хотел бы я, чтобы сделать:Как обновить данные таблицы с помощью Ajax, Json и Node.js

page.ejs

<table id="tblProgs" class="table table-bordered table-hover table-striped dataTable"> 
<thead> 
    <tr> 
     <th> 
      Column 
     </th> 
    </tr> 
</thead> 
<tbody> 
    <% datas.forEach(function(data) { %> 
      <tr> 
       <th width="15%"> 
        <%- data._column %> 
       </th> 
      </tr> 
    <% }) %> 
</tbody> 
</table> 
содержание

Ajax, который также находится в page.ejs тела

 $('#formId').submit(function (e){ 
      e.preventDefault(); 
      $.ajax({ 
       type: 'POST', 
       data: JSON.stringify(data), 
       cache: false, 
       contentType: 'application/json', 
       datatype: "json", 
       url: '/route/to/nodejs', 
       success: function (result) {        
        console.log("Here are the response in json format: " + result); 
       }           
      }); 
     }); 

URL-адрес /route/to/nodejs называют это функция:

Функция, вызываемая в узле .js сервер:

query = "SELECT * FROM table_name"; 
    sequelize.query(query, { 
     type: sequelize.QueryTypes.SELECT 
    }).success(function (result) { 
      var response = { 
       data : result,      
      } 
      res.send(response); 
    }).catch(function (error) { 
     res.render('server-error', { 
      user: user, 
      session: req.session, 
      error: error 
     }); 
    }); 

Мой вопрос: как обновить данные таблицы в page.ejs в успехе АЯКС обратного вызова без перезагрузки страницы?

Спасибо!

ответ

3

Вы можете удалить существующее содержимое tbody, а затем повторно выполнить рендеринг с помощью jQuery в обратном вызове jQuery AJAX. Что-то вроде ..

success: function (result) {  
    $('tbody').empty(); 
    for (var data in result) { 
     $('tbody').append('<tr><th width="15%">'+result[data]._column+'</th></tr>'); 
    } 
}) 
+0

Работает очень хорошо, спасибо! –

 Смежные вопросы

  • Нет связанных вопросов^_^