表单使用Ajax发送GET请求和POST请求
GET请求
- 报文行 请求方式+请求地址?参数1=值&参数2=值 http/版本 -->open(请求方式+请求地址?参数1=值&参数2=值)
- 报文头 GET方式中一般情况不用管报文头
- 报文体 参数都放在url地址中了,所以报文体中无参数 —>send(null)发送请求
// 输入框失去焦点事件
document.querySelector('.username').onblur = function () {
let name = this.value
//使用XMLHttpRequest对象进行发送请求和接收响应
let xhr = new XMLHttpRequest()
//请求行(请求方式,请求地址)
xhr.open('get', 'http://127.0.0.1:3002/validataUserName?name=' + name)
//请求头(get方式一般不用管)
//请求体-->send发送请求(参数都在url中拼接了所以send(null))
xhr.send(null)
//接收完会触发onload事件
xhr.onload = function () {
//响应内容都存放在response中(字符串的格式!!!!!)
let res = JSON.parse(xhr.response)
if (res.code == 201) {
document.querySelector('span').innerHTML = res.msg
return
} else if (res.code == 200) {
document.querySelector('span').innerHTML = res.msg
}
}
}
POST请求
- 报文行 请求方式+请求地址 -->open()
- 报文头 设置请求报文头 setRequestHeader(‘Content-Type’,‘类型’) 有传参数但没设置的话后台接收不到参数
- 报文体 参数都写在报文体中send() 使用键值对的形式传递
document.querySelector('.sub').onclick = function () {
//获取输入框的值
let name = document.querySelector('.username').value
let password = document.querySelector('.password').value
let phone = document.querySelector('.phone').value
//创建XMLHttpRequest对象进行发送请求和接收响应
let xhr = new XMLHttpRequest()
//表单使用POST请求
//设置请求行-->open()
xhr.open('post', 'http://127.0.0.1:3002/addUser')
//设置请求头(有参数必须设置请求头的Content-Type,否则后台接收不到参数)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//请求体(POST参数放在请求体中)-->send()键值对的形式
xhr.send(`userName=${name}&password=${password}&phone=${phone}`)
//接收完会自动触发onload事件
xhr.onload = function () {
let res = JSON.parse(xhr.response)
if (res.code == 201) {
alert('注册失败');
} else if (res.code == 200) {
alert('注册成功');
}
}
}
<form action="">
用户名:<input type="text" class="username"><span></span><br>
密码:<input type="password" class="password"><br>
手机号码:<input type="phone" class="phone"><br>
<input type="button" value="注册" class="sub">
</form>
- 注意:接口要改成自己的!!