ajax请求成功后怎么跳转到HTML页面

 在开发Web应用程序时，经常会遇到需要通过AJAX请求来获取数据并在HTML页面上进行展示的情况。当AJAX请求成功后，如何跳转到另一个HTML页面是一个常见的问题。本文将介绍一种可行的解决方案，并通过举例进行说明。
在前端开发中，我们通常会使用AJAX来向服务器发起请求，获取数据并在页面上进行展示。当AJAX请求成功后，我们想要跳转到另一个HTML页面，例如显示一个详情页或者跳转到登录成功后的主页。这种情况下，我们可以通过JavaScript来实现页面的跳转。
例如，假设我们有一个简单的登录页面，当用户点击登录按钮后，会通过AJAX请求将用户输入的用户名和密码发送给服务器进行验证。当验证成功后，我们想要跳转到主页。可以通过以下代码实现：

html
<button onclick="login()">登录</button>

<script>
function login() {
  // 获取用户输入的用户名和密码
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  // 发起AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/login", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 登录成功后跳转到主页
      window.location.href = "/home.html";
    }
  };
  xhr.send(JSON.stringify({ username: username, password: password }));
}
</script> 

上述代码中，当用户点击登录按钮后，`login()`函数会被调用。该函数会获取用户名和密码，并通过AJAX请求将其发送给服务器进行验证。当服务器返回状态码为200，并且AJAX请求的状态为`readyState`为4时，我们可以认为登录成功。此时，我们可以使用`window.location.href`将页面重定向到主页。
除了重定向到另一个HTML页面外，我们还可以在AJAX请求成功后加载新页面内容而不刷新整个页面。例如，假设我们的页面中有一个`

`标签，我们想要通过AJAX请求加载另一个页面的内容并显示在该`

`标签中。可以通过以下代码实现：

html
<div id="content"></div>

<script>
function loadContent() {
  // 发起AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/news", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 将返回的内容显示在页面中
      document.getElementById("content").innerHTML = xhr.responseText;
    }
  };
  xhr.send();
}
</script> 

上述代码中，`loadContent()`函数会发起一个AJAX请求，获取新闻内容的HTML代码。当AJAX请求成功后，我们会将返回的内容通过`innerHTML`属性赋值给目标`

`标签，从而将新闻内容展示在页面上。
总结来说，当我们在AJAX请求成功后想要跳转到另一个HTML页面时，我们可以使用`window.location.href`实现页面的重定向，或者通过`innerHTML`属性将返回的HTML内容加载到指定的元素中。以上是本文对这个问题的解决方案进行的说明和举例。希望能帮助到你在开发中的实践。