Как обновить таблицу после ajax?

Question

Вывел таблицу через PHP, добавил форму редактирования по этой таблице. Написал ajax чтобы было без перезагрузки страницы, но загвоздка значения таблицы не обновляются, только после перезагрузки страницы. Что нужно дописать в ajax?

// Устанавливаем событие отправки для формы с id=form
$("#ajax_form").submit(function (e) { 
    e.preventDefault();
     var form_data = $(this).serialize(); // Собираем все данные из формы
     $.ajax({
         type: "POST", // Метод отправки
         url: "/php/update.php", // Путь до php файла отправителя
         data: form_data,
         success: function () {
             // Код в этом блоке выполняется при успешной отправке сообщения
            
             alert("Изменено!");
        
         }
        
     }); return false;
 });

Answer 1

Нужно дописать в success вставку полученного в ответе POST значения в DOM. То есть у вас должно получиться что-то типа такого, где data – это ответ, а element – место, куда нужно вставить результат:

HTML:

<div id='element'></div> // элемент, в который вы вернёте результат

JS:

$("#ajax_form").submit(e => {
    e.preventDefault()
    const element = document.getElementById('element') // находите на странице элемент, в который вы хотите вернуть результат
    const form_data = $(this).serialize()
    $.ajax({
        type: "POST",
        url: "/php/update.php",
        data: form_data,
        success: data => element.outerHTML = data // вставляете в этот элемент ответ сервера
    }); return false
})

И вообще проконсольте ответ вашей функции, чтобы узнать, что она возвращает (и возвращает ли вообще что-то):

success: data => console.log(data)

БЛОГ НА HUSL

Как обновить таблицу после ajax?

Ответы (1 шт):