get请求参数
先启动后台
<!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>get传参</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. 建立连接
//通过get方法把参数传给后端
xhr.open('get', `http://10.7.162.138:8888/test/third?name=${username}&age=${age}`)
// 3. 发送请求
xhr.send()
// 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>
输入姓名年龄后点击提交，可将输入的数据传给后台
