原生ajax、jQuery ajax、axios带参的区别

最新推荐文章于 2022-03-06 05:15:34 发布

秃头学姐爱喝奶茶

最新推荐文章于 2022-03-06 05:15:34 发布

阅读量213

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_41989717/article/details/108781284

版权

这篇博客详细介绍了原生JavaScript、jQuery和Axios库在执行AJAX请求时的不同之处。对于GET和POST请求，分别探讨了参数传递、请求头设置以及数据格式化的方法。原生AJAX需要手动设置头部和数据格式，而jQuery和Axios则提供了更便捷的接口。jQuery默认采用表单格式，Axios则默认发送JSON数据。通过实例代码，读者可以清晰地理解三种方式的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生ajax

get

头部不设置，参数转为查询字符串拼接到url上

post 参数在send() 里

（1）发表单格式，设置头部为表单格式，数据也要是表单格式数据
（2）发json格式，设置头部为json格式，数据也要是json格式数据

样式代码

  <script>
      let qs = Qs;
      let xhr = new XMLHttpRequest();
      //   get传参
      /*xhr.open(
        "get",
        "http://47.106.244.1:8099/manager/category/findAllCategory?" +
          qs.stringify({ id: 1 })
      );
      //设置请求头部   为from表单格式
      //   xhr.setRequestHeader("Content-Type", "application/x-www-from-urlencoded");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      };*/

      //   post传参
      xhr.open("post", "http://47.106.244.1:8099/manager/user/findAllUser");
      //   不设置头部的时候默认是文本字符串传参
      
      //设置请求头部   为from表单格式
      //   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      //   xhr.send(qs.stringify({ id: 1 }));
     
      //设置请求头部   为json格式
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.send(JSON.stringify({ id: 1 }));
      
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      };
    </script>

jQuery的ajax 默认发表单格式，表单数据

get

头部不设置，参数【对象】放到data上，jQuery帮转为查询字符串拼到url后

post

（1）发表单格式，头部不需要设置，参数【对象】放到data上，jQuery帮转为表单格式数据放到请求体中
（2）发json格式，设置头部为json格式，参数【对象】转为son字符串放到data上，jQuery帮放在请求体

样式代码

 <script>
      let qs = Qs;
      $.ajax({
        url: "http://47.106.244.1:8099/manager/user/findAllUser",
        method: "post",

        //表单数据格式
        // data: qs.stringify{ id: 1, name: 'zhangsan' },
        // headers: {
        //   "Coontent-Type": "application/x-www-form-urlencoded;charset=utf-8",
        // },

        // json数据格式
        data: { id: 1, name: "zhangsan" },
        headers: {
          "Coontent-Type": "application/json;charset=utf-8",
        },
      });
    </script>

axios 默认发json，不用关注Content-Type（头部信息）

get

参数带在params：{}

post

（1）参数带在data：{}
（2）发表单数据格式发表单数据就行，qs转数据就行
（3）发json格式，发js对象，不用转换，axios帮忙转换

样式代码

  <script>
      let qs = Qs;
      axios({
        // 配置对象
        url: "http://47.106.244.1:8099/manager/user/findAllUser",
        method: "post",
        // get 带参  在params上
        params: { id: 1 },
        // post带参  在data上
        // data: { name: "zhangsan" },
        // 将数据转为表单数据格式
        data: qs.stringify({ name: "zhangsan" }),
        // 头部   默认为json
        // headers: {},
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=uft-8",
        },
      });
    </script>