один щелчок вызывает два нежелательных вызова ajax, а DOM не обновляется, пока я не обновлю свою страницу

#javascript #jquery #node.js #ajax #express

#javascript #jquery #node.js #ajax #экспресс

Вопрос:

мой щелчок по span отправляет запрос ajax и удаляет нажатое задание из базы данных. но в dom он не удаляется, пока я не обновлю свою страницу.

my index.html

 <ul class="list">
</ul>

на моей вкладке «Сеть» он отправляет два запроса xhr, которые я не упомянул в коде.

изображение ошибки

app.js

 $(".list").on("click","span",function(e) {
  e.stopPropagation();
  deleteTodo($(this).parent());
});

 function deleteTodo(el) {
  let todoId = el.data("id"), deleteURL = "api/todos/"   todoId;

  $.ajax({
    method: "DELETE",
    url: deleteURL,
  }).then(function(data) {
    el.remove();
  }).catch(function(err) {
    console.log(err);
  });
}

1. Судя по опубликованному вами изображению, был только один запрос AJAX (XHR). 302 — это перенаправление, что означает, что проблема на стороне сервера. Сервер перенаправил запрос на страницу, которая не существует (404).

2. да. теперь я понял, что проблема была на стороне сервера, и исправил ее. Спасибо

Ответ №1:

На приведенном выше рисунке показано, что проблема была на стороне сервера. В файле моего node backend API Router.js есть код, который перенаправляет его на /api/todos URL-адрес после удаления задачи. эта ошибка заставила меня app.js отклонить обещание. поэтому я не смог обновить DOM.

код, вызывающий ошибку

 router.delete("/:todoId", function(req, res){
    db.Todo.findOneAndDelete(req.params.todoId)
    .then(function(){
        res.redirect("/api/todos");
    })
    .catch(function(err){
        res.send(err);
    })

отредактированный код

 router.delete("/:todoId", function(req, res){
    db.Todo.findOneAndDelete(req.params.todoId)
    .then(function(){
        res.json({message: 'We deleted it!'});
    })
    .catch(function(err){
        res.send(err);
    })

1. Если вы собираетесь ответить на свой собственный вопрос, вам следует добавить больше контекста. На какой платформе / языке находится этот серверный код? В этом ответе нет ничего особенно плохого, но без контекста это непонятно. Я предлагаю вам отредактировать этот ответ, чтобы улучшить его, чтобы он мог помочь другим в будущем, которые столкнулись с подобной проблемой AJAX.

Ответ №2:

Чтобы удалить элемент после удаления его из базы данных, получите элемент el parent, затем заставьте родительский элемент удалить его

 function deleteTodo(el) { let todoId = el.data("id"),    deleteURL = "api/todos/"   todoId; $.ajax({ method: "DELETE", url: deleteURL, }).then(function(data) { 
var elparent = $('el parent element')[0];
elparent.removeChild(el); }).catch(function(err) { console.log(err); }); }