模态框ajax登录 示例代码

模态框是一种常用的用户界面组件，用于显示弹出窗口，通常用于登录、注册等操作。在使用模态框实现登录功能时，可以通过Ajax技术实现异步登录验证，提高用户体验。

我们需要创建一个登录按钮，当用户点击该按钮时，模态框将弹出显示。示例代码如下：

<button id="loginBtn">登录</button>

接下来，我们需要创建一个模态框，用于显示登录表单。示例代码如下：

<div id="loginModal" class="b43d-0a4f-ac59-40df modal">
  <div class="0a4f-ac59-40df-eec0 modal-content">
    <span class="ac59-40df-eec0-3345 close">×</span>
    <form id="loginForm">
      <input type="text" id="username" name="username" placeholder="用户名">
      <input type="password" id="password" name="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
  </div>
</div>

在模态框中，我们使用了一个关闭按钮，以及一个登录表单。登录表单中包含了用户名和密码的输入框，以及一个登录按钮。

接下来，我们需要使用JavaScript代码来实现模态框的显示和隐藏，并通过Ajax技术实现异步登录验证。示例代码如下：

// 获取登录按钮和模态框
var loginBtn = document.getElementById("loginBtn");
var loginModal = document.getElementById("loginModal");
// 当用户点击登录按钮时，显示模态框
loginBtn.addEventListener("click", function() {
  loginModal.style.display = "block";
});
// 当用户点击模态框的关闭按钮时，隐藏模态框
var closeButton = document.querySelector(".close");
closeButton.addEventListener("click", function() {
  loginModal.style.display = "none";
});
// 当用户提交登录表单时，通过Ajax发送登录请求
var loginForm = document.getElementById("loginForm");
loginForm.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  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) {
      // 登录成功，根据服务器返回的响应进行相应处理
      var response = JSON.parse(xhr.responseText);
      if (response.success) {
        // 登录成功，刷新页面或进行其他操作
        location.reload();
      } else {
        // 登录失败，显示错误信息
        alert(response.message);
      }
    }
  };
  xhr.send(JSON.stringify({ username: username, password: password }));
});

以上代码中，我们首先通过JavaScript获取登录按钮和模态框，并为登录按钮添加点击事件，当用户点击登录按钮时，模态框将显示出来。我们为模态框的关闭按钮添加点击事件，当用户点击关闭按钮时，模态框将隐藏起来。

接着，我们为登录表单添加提交事件，当用户提交登录表单时，通过Ajax发送登录请求。在发送请求时，我们使用XMLHttpRequest对象创建一个POST请求，并设置请求头的Content-Type为application/json。在请求的回调函数中，我们根据服务器返回的响应进行相应处理，如果登录成功，则刷新页面或进行其他操作；如果登录失败，则显示错误信息。

通过以上示例代码，我们可以实现一个模态框Ajax登录功能，提高用户体验。