固定请求地址和方法
<body> <script> /* 1. 新闻接口 get http://ajax-api.itheima.net/api/news 无参数 */ function myAxios() { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); // 2.在请求行中设置请求的 地址 和方法 xhr.open("get", "http://ajax-api.itheima.net/api/settings"); // 3.注册回调函数 服务器响应内容回来之后触发 xhr.addEventListener("load", function () { // response 响应 console.log(xhr.response); resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve }); // 4.在请求体里面发送请求 xhr.send(); }); } myAxios().then((res) => { console.log(res); }); </script>
axios参数的提取
<body> <script> /* 1. 新闻接口 get http://ajax-api.itheima.net/api/news 无参数 参数是一个对象 url 地址+get的参数(如果有的话) method 目前只考虑get */ function myAxios(option) { return new Promise((resolve, reject) => { // method = "get" get可以默认不传 const { method = "get", url } = option; const xhr = new XMLHttpRequest(); // 2.在请求行中设置请求的 地址 和方法 xhr.open(method, url); // 3.注册回调函数 服务器响应内容回来之后触发 xhr.addEventListener("load", function () { // response 响应 // console.log(xhr.response); resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve }); // 4.在请求体里面发送请求 xhr.send(); }); } myAxios({ method: "get", url: "http://ajax-api.itheima.net/api/settings", }).then((res) => { console.log(res); }); </script> </body>axios传递json给服务器
<body> <h2>axios传递json给服务器</h2> <button class="get">获取图书</button> <button class="add">新增图书</button> <button class="edit">修改图书</button> <button class="delete">删除图书</button> <script> /* 参数是一个对象 url 地址+get的参数(如果有的话) method data:{} 通过请求体传递的数据 写到这里.对象的格式 */ function myAxios(option) { return new Promise((resolve, reject) => { // method = "get" get可以默认不传 const { method = "get", url, data } = option; const xhr = new XMLHttpRequest(); // 2.在请求行中设置请求的 地址 和方法 xhr.open(method, url); // 3.注册回调函数 服务器响应内容回来之后触发 xhr.setRequestHeader("content-type", "application/json"); xhr.addEventListener("load", function () { // response 响应 // console.log(xhr.response); resolve(JSON.parse(xhr.response)); //把响应回来的数据给到成功时调用的方法resolve }); // 4.在请求体里面发送请求 xhr.send(JSON.stringify(data)); }); } myAxios({ method: "post", url: "http://ajax-api.itheima.net/api/login", data: { username: "admin", password: "123456", }, }).then((res) => { console.log(res); }); // document.querySelector(".get").onclick = () => { myAxios({ method: "get", url: "http://ajax-api.itheima.net/api/books", }).then((res) => { console.log(res); }); }; // document.querySelector(".add").onclick = () => { myAxios({ method: "post", url: "http://ajax-api.itheima.net/api/books", data: { bookname: "H哈哈哈", author: "aa", publisher: "dd", }, }).then((res) => { console.log(res); }); }; // document.querySelector(".edit").onclick = () => { myAxios({ method: "put", url: "http://ajax-api.itheima.net/api/books/2114", data: { bookname: "H哈哈哈qqqq", author: "aa", publisher: "dd", }, }).then((res) => { console.log(res); }); }; // document.querySelector(".delete").onclick = () => { myAxios({ method: "delete", url: "http://ajax-api.itheima.net/api/books/2114", }).then((res) => { console.log(res); alert("已删除"); }); }; </script> </body>
标签:原生,axio,get,url,res,axjax,xhr,api,method From: https://www.cnblogs.com/JAG2671169285/p/16950486.html