Ajax. Выполнение без перезагрузки страницы

92
16 ноября 2020, 01:50

У меня есть ui с помощью которого я могу удалять, редактировать, добавлять записи в бд. На главной странице просто таблица с соответствующими кнопками для действия. Запросы посылаю на REST контроллер, который и определяет что и как будет выполняться. Все методы запроса к контроллеру я осуществляю через jquery с помощью метода $.ajax. Все действия выполняются, но происходит перезагрузка страницы, если удаляю, добавляю или редактирую данные, после отправки данных с формы, страница перезагружается, а я хочу сделать так, чтобы отрисовывалась заново только таблица, а не перезагружалась вся страница. Вот скрипт, который за все это отвечает:

$(document).ready(function() {
                var table = $('table');
                var loadDataFromDB =$.ajax({
                                    type: "GET",
                                    url: LIST_PRODUCTS,
                                    dataType: "json",
                                    async: true,
                                    success: function (result) {
                                        for(var i in result) {
                                            var str = "<tr>";
                                            for(var prop in result[i]){
                                                str += "<td>" + result[i][prop] + "</td>";
                                            }
                                            str += "<td><a href='/' data-id='" + result[i].id + "' class='delete'>удалить</a></td>";
                                            str += "<td><a href='/' data-id='" + result[i].id + "' class='edit'>редактировать</a></td>";
                                            str += "</tr>";
                                            table.append(str);
                                        }
                                    },
                                    error: function () {
                                        alert("Exception on out");
                                    }
                                });

                $(document).on('click', '.delete', function () {
                    var row = $(this).closest('td').parent();
                    console.log($(this).attr("data-id"));
                    $.ajax({
                        type: "DELETE",
                        url: LIST_PRODUCTS + "/delete/" + $(this).attr("data-id"),
                        async: true,
                        done: function () {
                            loadDataFromDB();
                        }
                    });
                });
                $('#form').submit(function () {
                    sendAjaxForm();
                    console.log(response);
                });
                function sendAjaxForm() {
                    var DATA = {
                        name: $("#name").val(),
                        description: $("#description").val(),
                        create_date: $("#create_date").val(),
                        place_storage: $("#place_storage").val(),
                        reserved: $("#reserved").val()
                    };
                    $.ajax({
                        url: LIST_PRODUCTS + "/create",
                        type: "POST",
                        /*data: $('#form').serialize(),*/
                        data: JSON.stringify(DATA),
                        dataType: "json",
                        contentType:"application/json; charset=utf-8",
                        async: true,
                        success: function (response) {
                            loadDataFromDB();
                        }
                    });
                }

Код редактирования я еще не дописал, но он будет аналогичен добавлению. loadDataFromDB эта переменная js, как я задумал, должна отрабатывать, после каждого действия(добавления/удаления/редактирования). Но она не отрабатывает нигде. Я написал ее в секциях done/success, но там она не срабатывает. И если дописать секцию error в ajax запросе на добавление, после первого добавления записи происходит ошибка, но записи все равно добавляются.

Answer 1

Перезагрузка страницы после отправки формы, это поведение браузера по умолчанию. Оно работает когда внутри тега form находится <button type="submit">

Чтобы страница не перезагружалась используйте либо

 <button type="button"></button>

либо внутри обработчика отмените событие вызвав

  event.preventDefault();
READ ALSO
Разъясните на пальцах как работает эта строка

Разъясните на пальцах как работает эта строка

Задача: написать функцию, которая принимает строку скобок, и определить, является ли порядок скобок действительным['(',')'] - это действительный...

96
Неясна причина появления ошибки TypeError: Cannot read property &#39;XXX&#39; of undefined [дубликат]

Неясна причина появления ошибки TypeError: Cannot read property 'XXX' of undefined [дубликат]

Перечитал много раз ответы на вопрос Почему появляется ошибка undefined?

99