服务端消息弹窗提示，一文读懂

2022-12-09 20:08:50

利用 Ajax 在页面中轻松弹窗提示消息

在现代 Web 开发中，用户界面体验是重中之重。向用户提供即时的反馈至关重要，而弹窗提示消息正是实现这一目标的有效方式。通过利用 Ajax 技术，我们可以在页面中轻松地显示弹窗提示，无论服务端返回的数据是否成功。

准备工作

首先，确保您的项目包含 jQuery 库，因为它在 Ajax 操作中扮演着重要的角色。您可以通过 CDN 或直接下载并包含 jQuery 库来实现这一点。

弹窗提示代码

当服务端返回数据后，我们可以利用 Ajax 来处理后续的操作，包括弹窗提示和页面跳转。以下是一个完整的弹窗提示代码示例：

$.ajax({
  url: "server-side-url",
  data: data,
  dataType: "json",
  type: "POST",
  success: function (response) {
    btn_target.removeClass("disabled");

    if (response.code == 200) {
      // 服务端返回成功，弹窗显示成功消息
      showSuccessMessage("操作成功！");
    } else {
      // 服务端返回失败，弹窗显示错误消息
      showErrorMessage(response.message);
    }
  }
});

成功消息提示

为了展示成功消息，我们需要创建一个名为 showSuccessMessage 的函数，函数内部包含弹窗代码，并传入成功消息作为参数。以下是具体实现代码：

function showSuccessMessage(message) {
  // 创建弹窗容器元素
  var modal = $("<div class='modal fade' role='dialog'></div>");

  // 创建弹窗内容元素
  var modalContent = $("<div class='modal-dialog'></div>");

  // 创建弹窗标题元素
  var modalHeader = $("<div class='modal-header'></div>");

  // 创建弹窗标题文本元素
  var modalTitle = $("<h4></h4>").text("操作成功！");

  // 创建弹窗内容文本元素
  var modalBody = $("<div class='modal-body'></div>").text(message);

  // 创建弹窗关闭按钮元素
  var modalCloseButton = $("<button type='button' class='close' data-dismiss='modal'>&times;</button>");

  // 将元素组装起来
  modalHeader.append(modalTitle);
  modalHeader.append(modalCloseButton);
  modalContent.append(modalHeader);
  modalContent.append(modalBody);
  modal.append(modalContent);

  // 显示弹窗
  modal.modal("show");
}

错误消息提示

与成功消息提示类似，我们也创建一个名为 showErrorMessage 的函数来实现错误消息提示，函数内部包含弹窗代码，并传入错误消息作为参数。具体实现代码如下：

function showErrorMessage(message) {
  // 创建弹窗容器元素
  var modal = $("<div class='modal fade' role='dialog'></div>");

  // 创建弹窗内容元素
  var modalContent = $("<div class='modal-dialog'></div>");

  // 创建弹窗标题元素
  var modalHeader = $("<div class='modal-header'></div>");

  // 创建弹窗标题文本元素
  var modalTitle = $("<h4></h4>").text("操作失败！");

  // 创建弹窗内容文本元素
  var modalBody = $("<div class='modal-body'></div>").text(message);

  // 创建弹窗关闭按钮元素
  var modalCloseButton = $("<button type='button' class='close' data-dismiss='modal'>&times;</button>");

  // 将元素组装起来
  modalHeader.append(modalTitle);
  modalHeader.append(modalCloseButton);
  modalContent.append(modalHeader);
  modalContent.append(modalBody);
  modal.append(modalContent);

  // 显示弹窗
  modal.modal("show");
}

页面跳转

在某些情况下，您可能需要在服务端数据返回后执行页面跳转操作。在 Ajax 操作中，可以使用以下代码来实现页面跳转：

window.location.href = "target-url";

只需将 "target-url" 替换为您想要跳转的目标页面 URL 即可。

常见问题解答

如何使用 Ajax 处理服务端返回的数据？
Ajax 提供了 $.ajax 方法，可用于向服务端发送请求并处理响应数据。
如何在弹窗提示中显示自定义消息？
只需在调用 showSuccessMessage 或 showErrorMessage 函数时将自定义消息作为参数传入即可。
可以同时显示成功消息和错误消息吗？
通常情况下，一次只应显示一种类型的消息，但您可以在需要时使用条件判断来决定显示哪种消息。
如何实现 Ajax 分页？
Ajax 分页涉及使用 Ajax 逐页加载数据。您可以使用 $.ajax 方法和分页服务器端脚本来实现此功能。
如何在 Ajax 操作中处理异常？
Ajax 操作可以使用 try-catch 语句或 $.ajaxSetup 方法来处理异常。