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

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

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>

 

 

posted @ 2022-12-02 13:35  噢噢噢J  阅读(15)  评论(0)  编辑  收藏  举报