不同数据格式一般按照后端的要求来写数据格式

不同数据格式一般按照后端的要求来写数据格式

1.formData 用new data 使用FormData包裹

2.application/json会自动映射

3.application/x-www-form-urlencoded url

  <body>
    <h2>form-data</h2>
    <input class="ipt" type="file" accept="image/*" />
    <h2>application/json</h2>
    <button class="json">测试登录接口</button>
    <h2>urlencoded</h2>
    <button class="urlencoded">测试urlencoded格式</button>
    <script src="./lib/axios.js"></script>
    <script>
      // http://ajax-api.itheima.net/api/file
      // 1.formData 用new data 使用FormData包裹
      document.querySelector(".ipt").onchange = function (e) {
        // 调用头像上传接口 提交图片
        const data = new FormData(); //用new data 使用FormData包裹
        data.append("avatar", e.target.files[0]);
        axios({
          url: "http://ajax-api.itheima.net/api/file",
          method: "post",
          data: data,
        }).then((res) => {
          console.log("res:", res);
        });
      };
      // 2.application/json会自动映射 返回的是JSON数据
      document.querySelector(".json").onclick = function () {
        axios
          .post("http://ajax-api.itheima.net/api/login", {
            username: "admin",
            password: "123456",
          })
          .then((res) => {
            console.log("res:", res);
          });
      };
      // 3.application/x-www-form-urlencoded  url
      document.querySelector(".urlencoded").onclick = function () {
        axios({
          url: "http://ajax-api.itheima.net/api/data",
          method: "post",
          data: "name=jack&age=18&friend=rose",
        }).then((res) => {
          console.log("res:", res);
        });
      };
    </script>
  </body>