实现一个简单的登录界面，以表单数据格式传递参数
2023-09-25 本文已影响0人
祈澈菇凉
<!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 请求。
