前端数据传输失败

小鱼儿 2024-03-16 14:06 30阅读 0赞

**1 问题**

通过postman可用传输数据到java但页面数据传输不成功

postman结果：

![9fcb3e9a57749328af592932e80ba018.png][]![02aae64a96e9a6303d4984de87b55ed8.png][]

页面传输结果：

![53e648c5ae3a4d97c65ff5fdc7e75757.png][]![c39b9c49d569daad25f2646823f4c0c1.png][]

**2 方法**

在使用页面传输数据时不能直接使用send(username,password)，我们需要使用FromData属性，将username和password添加到FromData里，在使用send(FromData)将数据传输过去，使用FromData属性以后的结果：

![f3d6f02969bf6b1bcf76e3e74a26f0a7.png][]![95f30fa36960d8a4440d21896a44e4a8.png][]

代码

<!DOCTYPE html>

<head>

<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>

</form>

//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中与数据库完成交互，在从后端将数据传回前端页面。

[9fcb3e9a57749328af592932e80ba018.png]: https://img-blog.csdnimg.cn/img_convert/9fcb3e9a57749328af592932e80ba018.png
[02aae64a96e9a6303d4984de87b55ed8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fca3c770f6924a889418155b82f8ee2d.png
[53e648c5ae3a4d97c65ff5fdc7e75757.png]: https://img-blog.csdnimg.cn/img_convert/53e648c5ae3a4d97c65ff5fdc7e75757.png
[c39b9c49d569daad25f2646823f4c0c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a89c1bbaa4704e5ebd9742cb2beda550.png
[f3d6f02969bf6b1bcf76e3e74a26f0a7.png]: https://img-blog.csdnimg.cn/img_convert/f3d6f02969bf6b1bcf76e3e74a26f0a7.png
[95f30fa36960d8a4440d21896a44e4a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b8c28c8801d44809a329481354214359.png