ajax登陆严重-ajax登录成功后显示用户名：示例代码

Ajax登录是一种通过异步请求的方式进行用户登录的方法。它的优点是可以在不刷新整个页面的情况下进行登录验证，并且可以在登录成功后动态地显示用户的用户名。

下面是一个简单的示例代码，用于演示Ajax登录成功后显示用户名的效果：

我们需要一个登录表单，其中包含用户名和密码的输入框以及一个登录按钮。当用户点击登录按钮时，我们会使用Ajax来发送登录请求。

HTML代码：

<form id="loginForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="登录">
</form>
<div id="result"></div>

接下来，我们需要编写JavaScript代码来处理登录请求和显示用户名。

JavaScript代码：

// 获取登录表单元素和结果显示区域的元素
var loginForm = document.getElementById('loginForm');
var resultDiv = document.getElementById('result');
// 监听表单的提交事件
loginForm.addEventListener('submit', function(event) {
  // 阻止表单的默认提交行为
  event.preventDefault();
  // 获取用户名和密码的值
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  // 创建一个新的XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求的方法和URL
  xhr.open('POST', '/login', true);
  // 设置请求头
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  // 监听请求的状态变化事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 登录成功后，显示用户名
      resultDiv.textContent = '欢迎，' + xhr.responseText + '!';
    }
  };
  // 发送登录请求
  xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
});

在上面的示例代码中，我们首先获取了登录表单和结果显示区域的元素，并监听了表单的提交事件。当用户点击登录按钮时，我们阻止了表单的默认提交行为，然后获取了用户名和密码的值。

接下来，我们创建了一个新的XMLHttpRequest对象，并设置了请求的方法和URL。我们还设置了请求头，以指定请求的内容类型。

然后，我们监听了请求的状态变化事件。当请求的状态变为XMLHttpRequest.DONE（即请求已完成）并且状态码为200（即请求成功）时，我们将服务器返回的用户名显示在结果显示区域。

我们发送了登录请求，将用户名和密码作为请求的参数发送给服务器。

通过这样的方式，当用户成功登录后，我们可以使用Ajax来动态地显示用户的用户名，而无需刷新整个页面。