如何显示成功消息并一起刷新页面答案

【问题标题】：How to show success message and refresh the page together如何显示成功消息并一起刷新页面
【发布时间】：2019-06-11 08:41:42
【问题描述】：

我有使用 AJAX 处理用户数据的 JSP Servlet 代码。在 AJAX 的 success 函数中，我想向用户显示一条成功消息，并且我还想清除表单中的所有字段，因此我重新加载了页面。但是，当我重新加载时，警报消失了。解决办法是什么？

$.ajax({
  url: '../Groups',
  data: {
    "mode": "create_assign",
    "name": name,
    "desc": desc,
    "status": status,
    "add": listadd
  },
  type: 'POST',
  success: function(response) {
    $.notify({
      message: "Created group successfully.",
    }, {
      type: "success"
    });
    location.reload();
  },
  error: function(jqXHR, textStatus, message) {
    $.notify({
      message: "System Error: Please try again or contact system admin.",
    }, {
      type: "danger"
    });
  },
  complete: function() {
    $('.overlay').hide();
  }
});

【问题讨论】：

您实际上不需要重新加载页面来清除输入字段，您可以使用 Jquery 轻松清空它们。这应该可以解决您的消息消失问题。
或者使用setTimeout()函数。显示消息后的一段时间可能是 1/2/5 秒，您可以重新加载页面。
如果你真的想重新加载你的页面（正如 Chris 所提到的，并不是真的需要），那么你需要将该消息传递给新的重新加载页面（例如使用本地存储）

标签： jquery html ajax

【解决方案1】：

在发出 AJAX 请求后重新加载页面是相当多余的。它使 AJAX 请求的全部意义没有实际意义。

如果您只想在提交后清除表单中的字段，您可以手动完成：

success: function(response) {
  $.notify("Created group successfully.", "success");
  $('#yourForm input').val('');
},

或者，您可以将 form 重置为其初始状态：

success: function(response) {
  $.notify("Created group successfully.", "success");
  $('#yourForm').trigger('reset');
},

请注意，上述示例使用了对$.notify() 的不那么冗长的速记调用，如documentation 中所示

【讨论】：

【解决方案2】：

或者，您可以显示成功消息，然后获取表单输入并清除它们，而不是重新加载页面，这看起来像这样：

$('#yourForm').each(function(){
    this.reset();
});

【讨论】：

【解决方案3】：

正如 Chris 所说，它是多余的，但您是否考虑过使用 setTimeout()？

例如，您可以这样做：

function successFunction(response) {
  $.notify({ message: "Created group successfully." }, { type: "success" });
  setTimeout(location.reload(), 4000); // time in milliseconds
}

并在您的主要 ajax 调用中添加：

success: successFunction(response)

【讨论】：

这不是很友好。想象一下，在一个网站上，页面突然完全重置。
这只是一个例子。我只是想展示 setTimeout 是如何工作的。我同意它不是你可以实际使用的东西。