1

У меня есть 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 запросе на добавление, после первого добавления записи происходит ошибка, но записи все равно добавляются.

1 ответ 1

2

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

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

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

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

  event.preventDefault();
3
  • С сабмитом понял, сейчас попробую. А что делать с операцией удаления например? Посмотрите на самый первый ajax запрос, там я добавляю каждой строке ссылку для удаления этой строки. Если я в атрибуте ссылки href не укажу адрес куда меня перенаправить, то секция success/done в ajax запросе на удаления не отрабатывает и страница просто весит без изменения, пока ее не перезагрузить, но запрос прошел и в бд все удалилось. И почему когда добавляю объект в базу через ajax запрос, после первого добавления, запрос завершается с секцией error, ответ в success я так понял никогда не попадает 28 апр 2019 в 14:02
  • Я во всем разобрался, использую ваш второй совет с event. Все отлично работает. Спасибо 28 апр 2019 в 18:48
  • @MaksOhotnikov отлично, пожалуйста 28 апр 2019 в 18:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.