实现一个简单的登录界面，以表单数据格式传递参数

王小婷

发布于 2023-09-27 08:26:53

2220

发布于 2023-09-27 08:26:53

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录界面</title>
  <style>
    body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    .login-container {
      background-color: #FFF;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 30px;
      width: 300px;
    }
    
    .login-container h2 {
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .login-form {
      margin-bottom: 20px;
    }
    
    .login-form label {
      display: block;
      color: #555;
      font-size: 16px;
      margin-bottom: 10px;
    }
    
    .login-form input[type="text"],
    .login-form input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #DDD;
      border-radius: 4px;
      outline: none;
    }
    
    .login-button {
      background-color: #E25822;
      color: #FFF;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      padding: 10px 20px;
      font-size: 16px;
      transition: background-color 0.3s ease;
      width: 100%;
    }
    
    .login-button:hover {
      background-color: #BF4316;
    }
  </style>
</head>
<body>
  <div class="login-container">
    <h2>登录</h2>
    <form class="login-form">
      <label for="username">用户名</label>
      <input type="text" id="username" placeholder="请输入用户名">
      <label for="password">密码</label>
      <input type="password" id="password" placeholder="请输入密码">
    </form>
    <button class="login-button">登录</button>
  </div>
</body>
</html>

发送请求，以表单数据（application/x-www-form-urlencoded）格式：传递参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录界面</title>
  <style>
    body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    .login-container {
      background-color: #FFF;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 30px;
      width: 300px;
    }
    
    .login-container h2 {
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .login-form {
      margin-bottom: 20px;
    }
    
    .login-form label {
      display: block;
      color: #555;
      font-size: 16px;
      margin-bottom: 10px;
    }
    
    .login-form input[type="text"],
    .login-form input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #DDD;
      border-radius: 4px;
      outline: none;
    }
    
    .login-button {
      background-color: #E25822;
      color: #FFF;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      padding: 10px 20px;
      font-size: 16px;
      transition: background-color 0.3s ease;
      width: 100%;
    }
    
    .login-button:hover {
      background-color: #BF4316;
    }
  </style>
  <script>
    function loginUser() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      const formData = new URLSearchParams();
      formData.append('username', username);
      formData.append('password', password);

      fetch('https://example.com/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: formData
      })
        .then(response => response.json())
        .then(data => {
          // 处理响应数据
          console.log(data);
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    }
  </script>
</head>
<body>
  <div class="login-container">
    <h2>登录</h2>
    <form class="login-form">
      <label for="username">用户名</label>
      <input type="text" id="username" placeholder="请输入用户名">
      <label for="password">密码</label>
      <input type="password" id="password" placeholder="请输入密码">
    </form>
    <button class="login-button" onclick="loginUser()">登录</button>
  </div>
</body>
</html>

添加了一个 JavaScript 函数 loginUser()，该函数在用户点击登录按钮时触发。函数中，获取用户名和密码的值，创建表单数据对象，并使用 Fetch API 发送 POST 请求。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

form