一、ajax请求流程
1、创建ajax对象
var xhr = new XMLHttpRequest()
2、配置本次请求信息
xhr.open(请求方式，请求地址，是否异步)
3、注册请求完成事件
xhr.onload = function() {
console.log(xhr.responseText) //获取后端返回值
}
4、把请求发送出去
xhr.send()
二、当后端返回数据类型是json格式时，需要进行转换
在请求完成后执行函数中使用以下方式拿到返回内容：
JSON.parse(xhr.responseText)
三、请求方式get和post区别
注意，在post发送数据时，需要特殊说明传递参数的格式，这个后端会给，在发送数据前需要加上
xhr.setRequestHeader(‘content-type’,‘application/x-www-form-urlencoded’)
四、模拟登陆前后端交互场景
<style>
*{
margin: 0;
padding:0;
}
form {
width: 500px;
padding:20px;
margin: 50px auto;
border:3px solid pink;
display: flex;
flex-direction: column;
font-size:30px;
padding-top:50px;
position:relative;
}
form > span {
position: absolute;
left:50%;
top:5px;
transform:translateX(-50%);
width:100%;
text-align: center;
display:none;
}
style>
<body>
<script>
<form>
<span class="error">用户名或者密码错误</span>
<label>
用户名：<input class="username" type="text">
</label>
<label>
密码： <input class="passward" type="passward">
</label>
<button>登陆</button>
</form>
script>
<script>
var loginForm = document.querySelector('form')
var nameInp = document.querySelector('username')
var pwdInp = document.querySelector('.passward')
var errBox = document.querySelector('.error')
loginForm.onsubmit = function(e){
#阻止表单默认提交行为
e.preventDefault()
var name = nameInp.value
var pwd = pwdInp.value
if(!name || !pwd) return alert('请完整填写表单')
var xhr = new XMLHttpRequest()
xhr.open('POST','http://localhost:8080/users/login',true)
xhr.onload=function(){
var res = Json.parse(xhr.responseText)
console.log(res)
if(res.code === 0){
errBox.style.display = 'block'
} else{
window.location.href="./home.html"
}
}
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send('username='+name+'&password='+passward)
}
script>
body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74