前后端交互
2022-07-20 本文已影响0人
像我这么帅的一般都是主角
ajax
返回字符串类型
image.png
// 1. 创建一个ajax对象
var xhr = new XMLHttpRequest();
// 2. 配置本次的请求信息
// 按照接口文档来进行书写下面的信息
// xhr.open(请求方式,请求地址,是否异步);
// 是否异步:默认为true,表示异步请求
xhr.open('GET','http://localhost:9999',true);
// 3. 配置一个请求完成后触发的事件
// 请求完整:本次请求发送出去,服务器接收到了我们的请求,并且服务器返回的信息已经回到了浏览器
xhr.onload = function () {
/*
拿到后端返回的信息
语法:xhr.responseText
*/
console.log(xhr.responseText);
}
// 4. 发送本次请求
xhr.send();
返回json格式数据类型
// 1. 创建一个ajax对象
var xhr = new XMLHttpRequest();
// 2. 配置本次的请求信息
// 按照接口文档来进行书写
// xhr.open(请求方式,请求地址,是否异步);
// 是否异步:默认为true,表示异步请求
xhr.open('GET','http://localhost:63342',true);
// 3. 配置一个请求完成后触发的事件
// 请求完整:本次请求发送出去,服务器接收到了我们的请求,并且服务器返回的信息已经回到了浏览器
xhr.onload = function () {
/*
拿到后端返回的信息
语法:xhr.responseText
*/
// 当后端返回的是json格式字符串时,需要进行单独的解析
// 语法:JSON.parse(json格式字符串)
// 返回前:解析好的js格式的数据
var res = JSON.parse(xhr.responseText);
console.log(res);
}
// 4. 发送本次请求
xhr.send();
不同的是,需要解析
请求方式
GET 和 POST 请求
image.png
image.png
案例 - 登陆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java script</title>
<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: 50px;
transform: translateX(-50%);
width: 100%;
text-align: center;
color: red;
display: none;
}
form > label {
height: 50px;
}
form > label > input {
font-size: 24px;
height: 40px;
padding-left: 20px;
}
</style>
</head>
<body>
<form>
<span class="error">wrong username or password!</span>
<label>
username<input class="username" type="text">
</label>
<label>
password<input class="password" type="text">
</label>
<button>log in</button>
</form>
<script>
/*
分析需求:
问题1 什么时候发送请求?
点击登录的时候,需要给form标签绑定一个表单提交页面
问题2 需要拿到什么信息?
用户填写的用户名和密码
问题3 需要如何发送给后端?
按照接口文档
问题4 请求完成以后 我们需要做什么?
根据后端返回的信息进行操作
*/
// 0. 获取元素
// 0.1 form
var loginForm = document.querySelector('form');
// 0.2 text
var nameInp = document.querySelector('.username');
var pwdInp = document.querySelector('.password');
// 0.3 error box
var errBox = document.querySelector('.error')
// 1. 给form绑定一个表单提交事件
loginForm.onsubmit = function (e) {
// 注意:组织表单默认提交行为
e.preventDefault();
console.log('send');
// 2. 拿到填写的用户名和密码
var name = nameInp.value;
var pwd = pwdInp.value;
// 2.1 验证
if (!name || !pwd) return alert('请完整填写表单')
// 3. 发送ajax请求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'address' , true);
xhr.onload = function () {
var res = JSON.parse(xhr.responseText);
console.log(res);
if (res.code === 0){
// failed
errBox.style.display = 'block';
} else {
// successed
}
}
//说明POST请求携带的参数
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
// 因为POST请求携带参数是在请求体内
xhr.send('username=' + name + '&password=' + pwd);
}
</script>
</body>
</html>
