Нежелательное изменение страницы после нажатия на ссылку удаления

Question

Я создал таблицу HTML.

Он динамически добавляет строки в таблицу и имеет возможность удалить текущую строку.

Каждая строка представляет собой данные из MongoDB. Когда я нажимаю кнопку delete, я хочу, чтобы элемент был удален из базы данных.

Однако я не могу создать тег HTML, который будет передавать ссылку на функцию без перезагрузки страницы.

Мой текущий метод перезагружает страницу после нажатия delete!

Вот мой код: -

$(document).submit( '#newProductForm', function(e) {
    e.preventDefault();

    //Create data for submission to database
    let data = $('#newProductForm').serialize();
    console.log("Form submitted: " + data);

    $.post({
        url: '/admin/add',
        type: 'POST',
        data: data,
        dataType: 'json'
    }).done( response => {
        resetProductTable();
        console.log("Successfully added products to the database!")
    }).fail( function (response) {
        console.log('Error New Product: ' + response);
    })
})

//Gets all the products from the database
function getAllProducts(){
    $.ajax('/admin/all').done( function (data) {

        const productTable = $('#productsTable');
        if (productTable.css("visibility", "hidden")) {
            productTable.css("visibility", "visible");
        }
        productTable.css("visibility", "visible");
        $('#loadingMessage').remove();
        if (data) {
            data.forEach(element => {
                productTable.append(`<tr class="productRows"><td>${element.title}</td>
                                         <td>${element.description}</td>
                                         <td>${element.price}</td>
                                         <td>${element.shipping.timeNeeded}</td>
                                         <td>${formatTime(element.shipping.price)}</td>
                                         <td>${element.quantity}</td>
                                         <td>${element.DateAdded}</td>
                                         <td>${element.tags}</td>
                                         <td><a href="admin/edit/${element._id}">Edit</a></td>
                                         <td><a href="admin/delete/${element._id}" id="deleteLink">Delete</a></td>
                                    </tr>`);
            });
        } else {
            productTable.append(`No Products Found!`)
        }
        console.log("Leaving get all products!");
    })
}

Как мне поступить?

Answer 1

Если вы создаете <a>, это ссылка, а затем ожидается, что она изменит страницу:

• С HTML элемент <a> может вызвать только запрос GETОжидается, что он изменит страницу после получения новой.

• Вы по-прежнему можете использовать атрибут target="_blank" <A> DOM, чтобы открыть ее в новой вкладке.

Смотрите в качестве примера, он попытается изменить страницу:

<a href="https://www.google.com/admin/delete/124">Delete</a>

Вероятно, вы хотите вызвать метод DELETE на своем бэкэнде, для этого вы можете использовать только JavaScript и некоторую библиотеку для ajax, такую ​​как xhr(низкий уровень) или fetch (высокий уровень).

Если вы хотите использовать элемент <a>, вы должны остановить распространение event с использованием JavaScript, для этого у вас есть событие . stopPropagation . Вам также нужно будет прослушать событие нажатия на элемент <a>:

window.onload = function() {
  document.querySelector('a').addEventListener('click', onDelete, false);
}

function onDelete(e) {
  e.preventDefault();
  // do whatever you want with the link
  console.log(e.target.href);
}

<a href="https://www.google.com/admin/delete/124" id="deleteLink">Delete</a>

Вы можете заменить <a> на <button>:

window.onload = function() {
  document.querySelector('button').addEventListener('click', onDelete, false);
}

function onDelete(e) {
  // do whatever you want with the link
  console.log(e.target.datasets.href);
}

.btn-link {
  display: inline;
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  color: rgb(0, 0, 238);
  text-decoration-color: rgb(0, 0, 238);
  text-decoration-line: underline;
  text-decoration-style: solid;
  height: auto;
}

<button class="btn-link" type="button" data-href="https://www.google.com/admin/delete/124" id="deleteLink">Delete</button>

В вашем приложении jQuery, даже если это устаревший код jQuery, с помощью <a> вы сделаете это:

// we don't need jQuery to write this but since it's there...
$(document).onload(function onload() {
  // bind the event from the whole page targeting all .btn-link elements 
  $(document).on('click', '.btn-link', function onClick(e) {
    e.stopPropagation(); // stop the event so you don't change page
    // you don't need jQuery for AJAX, just use fetch:
    fetch(e.target.href, { method: 'DELETE' }); 
  });
});