首页 > 其他分享 >原生axjax 和axio的结合使用

原生axjax 和axio的结合使用

时间:2022-12-04 19:44:53浏览次数:50  
标签:原生 axio get url res axjax xhr api method

固定请求地址和方法

<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

相关文章

  • 学习Delphi原生JSON框架(三)
    基于前面写的内容,我们可以快速读取一个数组的JSON串了,直接上代码:procedureTForm6.Button2Click(Sender:TObject);beginvarjsonstr:='{'+......
  • 学习Delphi原生JSON框架(二)
    前面写了如何快速读取一个JSON串,但只是针对简单的类型,如果JSON串中有数组该怎么办呢?一、例子代码先看下面的代码,读取一个学生的各科成绩。procedureTForm6.Button1Cli......
  • axios二次封装
    https://blog.csdn.net/weixin_54930261/article/details/126658948?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIS......
  • 京东零售大数据云原生平台化实践
    导读:今天为大家介绍京东零售大数据的云原生平台化实践,主要包括以下几大方面内容:云原生的定义和理解云原生相关技术的演化京东大数据在云原生平台化上的实践云......
  • 【云原生】k8s 管理平台 rancher
    目录一、概述二、Rancher架构三、安装Rancher1)安装Helm2)安装ingress-controller3)为Rancher创建命名空间4)选择SSL配置5)安装cert-manager6)通过Helm安装Rancher2)添......
  • 原生OKHttp的Get和Post请求思路
    原生OKHttp的Get和Post请求思路引入pom依赖<!--接收OKHttp返回json信息依赖-->   <dependency>     <groupId>com.squareup.okhttp3</groupId> ......
  • PHP原生增删改查
    注意大写SQL语句 1.连接数据库 $con=mysqli_connect("localhost","admin","123456","ljm_web");地址账号 密码数据库名if(mysqli......
  • 原生ajax 发送请求
    原生ajax 发送请求原生发送请求不带参数<body><h2>原生ajax</h2><button>原生发送请求不带参数</button><script>document.querySelector("b......
  • 肖sir ___手机原生app__简历上项目
    项目一:vivo蓝牙 项目简介:蓝牙是现在智能设备上一个必不可少的模块,支持大容量的近距离无线通信,支持多链接,安全性高。vivo蓝牙采用跳频扩谱技术避免工作频段受到干扰,测试......
  • Axios
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <scripttype="text/javascript"src="js/axios.min.js"></script> <scriptsrc="js/vue.js"type="text/j......