网络请求排错：
1.请求地址（是否严格按照接口文档的人要求 填入）
2.请求方式+请求状态码（200） 请求方式（是否严格按照接口文档 的请求方式 填入）
3.请求参数 （前端发给后端） 参数传递：是否严格按照后端给的接口文档 要求的 属性名 进行写入
4.返回数据（后端返回给前端的数据） 返回数据是否 满足自己的要求（确保前面三看没有问题， 只是4看出问题，找后端解决）
get请求:
let xhr = new XMLHttpRequest(); // 实例化ajax
/** * 接收参数:三个参数 * 1:请求方式 * 2:请求地址 * 3:请求参数 * */
xhr.open('get', 'http://139.9.177.51:3333/api/testGet?name=xxx');
xhr.send(); // 发送参数
// 监听返回值
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 如果步骤到了最后一步，并且网路正常的情况下
let data = xhr.responseText; // 获取返回的响应数据: (是一个JSON字符串,需要将它转换为js对象形式)
let newData = JSON.parse(data); // 转换
};
post请求：
let xhr = new XMLHttpRequest(); // 实例化ajax
xhr.open('post', 'http://139.9.177.51:3333/api/testPost'); // 2、请求方式 + 地址
// 3、设置请求头，模仿form表单提交数据
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 4、发送 +参数 'key=value&key1=value1'
xhr.send('name=孙悟空');
// 5、监听返回值
xhr.onreadystatechange = function(){
// 如果步骤到了第四步,并且网络状态良好的情况下
if(xhr.readyState == 4 && xhr.status == 200){
// 获取返回的数据
let data = xhr.responseText;
console.log(data);
}
};
json请求：
let xhr = new XMLHttpRequest(); // 实例化ajax
xhr.open('post', 'http://139.9.177.51:3333/api/testPost'); // 设置请求方式 + 地址
// 设置post请求头 此处需要将模仿form表单的请求换位json 格式:Content-type', 'application/ xhr.setRequestHeader('Content-type', 'application/json');
let obj = { name1: '猪八戒' }; // 此处是一个JSON对象
xhr.send(JSON.stringify(obj)); // 需要将js对象转化为json字符串
// 监听返回值
xhr.onreadystatechange = function () {
// 如果步骤到了第四步,并且网络状态良好的情况下
if (xhr.readyState == 4 && xhr.status == 200) {
let data = JSON.parse (xhr.responseText); // 获取返回的数据
document.querySelector('.p1').textContent = data.msg; //页面显示 document.querySelector('.p2').textContent = data.data;
}
};
