原生js创建get/post请求以及封装方式、axios的基本使用
时间：2024-03-30 16:15:50 来源：网络cs 作者：胡椒 栏目：运营工具 阅读：
原生js创建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>Document</title></head><body> <div id="box"></div> <script> //创建ajax引擎对象 let xhr = new XMLHttpRequest(); //配置请求方式和请求地址 xhr.open("get","http://ajax.h5.itsource.cn:5000/api/testGet?name=张三"); // 监听响应码和状态码 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ // 处理数据 let res = JSON.parse(xhr.responseText); console.log(res); //判定再渲染 if(res.code == 200){ box.innerHTML = res.data; } } } // 发送请求 xhr.send(); </script></body></html>原生js创建post请求
<!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>Document</title></head><body> <div id="box"></div> <script> //创建ajax引擎对象 let xhr = new XMLHttpRequest(); //配置请求方式和请求地址 xhr.open("post","http://ajax.h5.itsource.cn:5000/api/testPost"); // 监听状态变化和接收数据 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ // 处理数据 let res = JSON.parse(xhr.responseText); console.log(res); //判定再渲染 if(res.code == 200){ box.innerHTML = res.data; } } } //请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 发送请求 xhr.send("name=李四"); </script></body></html>原生get和post封装方式1
<!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>Document</title></head><body> <script> function ajax(type, url, parmas, callback) { //创建ajax引擎对象 let xhr = new XMLHttpRequest(); //处理参数,定义一个空数组 let arr = []; //遍历对象，拼接到数组中 for (const key in parmas) { if (Object.hasOwnProperty.call(parmas, key)) { arr.push(key + "=" + parmas[key]); } } parmas = arr.join("&"); if (type == "get") { //配置请求方式和请求地址 xhr.open(type, url + "?"+ parmas); // 发送请求 xhr.send(); } else { //配置请求方式和请求地址 xhr.open(type, url); //请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 发送请求 xhr.send(parmas); } // 监听状态变化和接收数据 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // 处理数据 callback(JSON.parse(xhr.responseText)); } } } ajax("get","http://ajax.h5.itsource.cn:5000/api/testGet",{ name:"张三" },function(res){ console.log(res); }) ajax("post","http://ajax.h5.itsource.cn:5000/api/testPost",{ name:"李四" },function(res){ console.log(res); }) </script></body></html>原生get和post封装方式2
<!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>Document</title></head><body> <script> // //方式二: function ajax(obj) { //处理参数 let type = obj.type; let url = obj.url; let parmas = obj.params; let callback = obj.callback; //创建ajax引擎对象 let xhr = new XMLHttpRequest(); //处理参数,定义一个空数组 let arr = []; //遍历对象，拼接到数组中 for (const key in parmas) { if (Object.hasOwnProperty.call(parmas, key)) { arr.push(key + "=" + parmas[key]); } } parmas = arr.join("&"); // 判定 if (type == "get") { //配置请求方式和请求地址 xhr.open(type, url + "?" + parmas); // 发送请求 xhr.send(); } else { //配置请求方式和请求地址 xhr.open(type, url); //请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 发送请求 xhr.send(parmas); } // 监听状态变化和接收数据 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // 处理数据 callback(JSON.parse(xhr.responseText)); } } } // 调用 ajax({ type: "get", url: 'http://ajax.h5.itsource.cn:5000/api/testGet', params: { name: '张三' }, callback: function (res) { console.log(res) } }) ajax({ type: "post", url: 'http://ajax.h5.itsource.cn:5000/api/testPost', params: { name: '李四' }, callback: function (res) { console.log(res) } }) </script></body></html>axios的基本使用
<!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>Document</title> <script src="./axios.min.js"></script></head><body> <script> // 为给定 ID 的 user 创建请求 axios.get('http://ajax.h5.itsource.cn:5000/api/testGet?name=张三') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); // 上面的请求也可以这样做 axios.get('http://ajax.h5.itsource.cn:5000/api/testGet', { params: { ID: 12345 } }) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); </script></body></html>本文链接：https://www.kjpai.cn/news/2024-03-30/151001.html，文章来源：网络cs，作者：胡椒，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
下一篇：返回列表