单击会不必要地进行两次 ajax 调用，并且在我刷新页面之前 DOM 不会更新答案

【问题标题】：single click makes two ajax call unwantedly and DOM not updated until i refresh my page单击会不必要地进行两次 ajax 调用，并且在我刷新页面之前 DOM 不会更新
【发布时间】：2021-03-01 20:41:19
【问题描述】：

我点击 span 会发送一个 ajax 请求并从数据库中删除点击的 todo。但在 dom 中，直到我刷新我的页面，它才会被删除。

my index.html

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

在我的网络选项卡中，它发送两个我在代码中没有提到的 xhr 请求。

error image

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);
  });
}

【问题讨论】：

根据您发布的图片，只有一个 AJAX (XHR) 请求。 302 是重定向，这意味着问题出在服务器端。服务器将请求重定向到不存在的页面 (404)。
是的。现在我知道问题出在服务器端并修复了它。谢谢

标签： javascript jquery node.js ajax express

【解决方案1】：

要从数据库中删除元素后删除它，获取el父元素，然后让父元素删除它

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); }); }

【讨论】：

【解决方案2】：

上图显示问题出在服务器端。在我的节点后端 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);
    })

【讨论】：

如果您要回答自己的问题，您应该添加更多上下文。此服务器代码使用什么平台/语言？这个答案没有什么特别的错误，但没有上下文就不清楚了。我建议您编辑此答案以改进它，以便它可以帮助将来遇到类似 AJAX 问题的其他人。