前端数据传输失败
1 问题
通过postman可用传输数据到java但页面数据传输不成功
postman结果：
页面传输结果：
2 方法
在使用页面传输数据时不能直接使用send(username,password)，我们需要使用FromData属性，将username和password添加到FromData里，在使用send(FromData)将数据传输过去，使用FromData属性以后的结果：
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例：登录</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #efefef;
background-size: 100% 100%;
background-repeat: no-repeat;
}
form {
background-color: #fbf9ff;
width: 350px;
padding: 20px;
margin: 180px auto;
border: 2px solid #2f11f1;
display: flex;
flex-direction: column;
font-size: 25px;
padding-top: 50px;
position: relative;
border-radius: 8px;
}
form>span {
position: absolute;
left: 50%;
top: 5px;
transform: translateX(-50%);
width: 100%;
text-align: center;
color: red;
display: none;
}
form>label {
height: 35px;
}
form>label>input {
font-size: 18px;
height: 25px;
padding-left: 10px;
}
button {
margin: 15px auto;
width: 80px;
height: 35px;
background-color: #c0bcff;
border-color: #8395fa;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<span class="error">用户名或者密码错误</span>
<label>
账号：<input class="username" type="text">
</label>
<label>
密码：<input class="password" type="password">
</label>
<button>登录</button>
</form>
<script type="text/javascript">
//1.获取元素
var loginForm = document.querySelector('form')
var nameInp = document.querySelector('.username')
var pwdInp = document.querySelector('.password')
var errBox = document.querySelector('.error')
//1. 给form 绑定一个表单提交事件
loginForm.onsubmit = function(e) {
//注意：要阻止表单的默认提交行为
e.preventDefault()
//2. 拿到用户填写的用户名和密码
var username = nameInp.value
var password = pwdInp.value
var frData = new FormData()
frData.append("username",username)
frData.append("password",password)
//2-2. 验证用户名和密码
// if(!name || !pwd) return alert('请填写账号密码')
if (!username) return alert('请填写账号！')
if (!password) return alert('请填写密码！')
//3. 发送ajax请求
var xhr = new XMLHttpRequest();
xhr.open('Post', 'http://localhost:8080/user/insert', true)
xhr.send(frData)
xhr.onload = function() {
//返回json格式，需要解析
console.log(xhr.responseText)
//进行条件判断
if (xhr.responseText == '登录成功'){
window.location.href= 'https://www.baidu.com'
}else {
alert(xhr.responseText)
}
}
console.log(username, password)
}
</script>
</body>
</html>
3 结语
在完成用户登录功能需要使用Ajax把数据传入后端，在后端写代码逻辑，在Java中与数据库完成交互，在从后端将数据传回前端页面。
腾讯云开发者
