前言
如何实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>post传参</title>
</head>
<body>
<form>
<input type="text" placeholder="请输入姓名" name="username"><br>
<input type="text" placeholder="请输入年龄" name="age"><br>
<input type="submit" class="product-list" />
</form>
<!-- 显示后端数据 -->
<p></p>
<script>
//获取元素
const btn = document.querySelector('.product-list')
const formEle = document.querySelector('form')
const pEle = document.querySelector('p')
const usernameInput = document.querySelector('input[name="username"]')
const ageInput = document.querySelector('input[name="age"]')
formEle.addEventListener('submit', function (e) {
//添加监听器，阻止默认行为，获取数据
e = e || window.event
e.preventDefault()
getData()
})
function getData() {
let username = usernameInput.value
let age = ageInput.value
// 1. 创建XMLHttpRequest
let xhr = new XMLHttpRequest()
// 2. 建立连接
//通过post方法把参数传给后端
//content-type: 内容传参类型
//请求头
xhr.open('post', `http://10.7.162.138:8888/test/fourth`)
// 3. 发送请求
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(`name=${username}&age=${age}`)
// 4. 接收响应数据
xhr.onreadystatechange = function () {
// 4.1 是否响应完成
if (xhr.readyState === 4) {
// 4.2 是否成功响应
if (xhr.status === 200) {
let data = xhr.responseText // 响应内容
pEle.innerHTML=data
console.log(JSON.parse(data))
} else {
alert('网络出错 ' + xhr.status)
}
}
}
}
</script>
</body>
</html>
此时将姓名年龄输入后点击提交，可将数据传到后端
