是否可以在不刷新页面的情况下从同一个 URL POST？

Question

我正在使用 ajax 这样做，并且在后端使用 res.end 进行响应，但到目前为止，我只能 POST 一次。这是我的代码：

服务器

app.post("/awesome", passwordless.restricted({ failureRedirect: "/" }), (req, res, next) => {
  // ...do a bunch of stuff
  res.end();
});

客户

$("[data-new-save]").on("click", function () {
  $.ajax({
    url: "/awesome",
    type: "POST",
    data: awesomeDetails,
    success: function () {
      console.log("Cool beans");
      refreshContent(); // Re-renders content

      // Feedback
      $("nav").after("<div class=\"flash success\">Success!</div>");

      setTimeout(function () {
        $(".flash").remove();
      }, 5000);
    },
    error: function () {
      console.log("Welp");

      // Feedback
      $(".navigation").after("<div class=\"flash error\">Failure</div>");

      setTimeout(function () {
        $(".flash").remove();
      }, 5000);
    }
  });
});

Answer 1

这是我用于类似的东西：

$(document).ready(function () {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $(this).attr('action') ||     window.location.pathname,
            type: "GET",
            data: $(this).serialize(),
            success: function (data) {
                $("#form_output").html(data);
            },
            error: function (jXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
});

Answer 2

这听起来像是 event-delegation 的情况。我的最佳猜测是您的 refreshContent() 函数正在删除原始 [data-new-save] 元素并创建新元素。这将导致绑定的 click 事件被删除，因为它是最初调用时存在的 DOM 节点的属性。您可以通过将事件委托给未获得 "refreshed" 的 DOM 节点来解决此问题，我假设 <body> 标签不会重绘，只有一些 children，因此如果您定位 <body> 并寻找匹配 "[data-new-save]" 的选择器，它应该可以正常运行：

$('body').on('click', "[data-new-save]", function () {
   $.ajax({
    url: "/awesome",
    type: "POST",
    data: awesomeDetails,
    success: function () {
      console.log("Cool beans");
      refreshContent(); // Re-renders content

      // Feedback
      $("nav").after("<div class=\"flash success\">Success!</div>");

      setTimeout(function () {
        $(".flash").remove();
      }, 5000);
    },
    error: function () {
      console.log("Welp");

      // Feedback
      $(".navigation").after("<div class=\"flash error\">Failure</div>");

      setTimeout(function () {
        $(".flash").remove();
      }, 5000);
    }
  });
});

是否可以在不刷新页面的情况下从同一个 URL POST？

Is it possible to POST from the same URL without refreshing the page?

node.js

ajax

express

post

feathersjs

服务器

客户