Загрузите содержимое после завершения ajax

Question

У меня есть форма, которая при отправке через ajax добавляет новый элемент в список в базе данных. Этот список отображается на странице, что я хочу сделать, это обновить этот список, когда новый элемент будет добавлен в список без обновления страницы. Каков наилучший способ сделать это?

Answer 1

Вам нужно, чтобы сервер возвращал некоторую информацию после первоначального запроса ajax. Если ваш список использует шаблон для визуализации каждого LI элемент, он бы, вероятно, лучше просто ответить HTML, а затем добавить, что непосредственно в UL

Допустим, что ваш сервер отвечает

<li class="animal" data-id="123"> 
    <a href="/animals/123">Panda</a> 
    It's a bear 
</li> 

Вот ваш бит JavaScript

var data = {name: "Panda", description: "It's a bear"}; 
var xhr = $.post('/animals', data); 

xhr.done(function(html) { 
    $("#my-list").append(html); 
}); 

---

Это решение juses jQuery.post и deferred.done