基于springboot 的 Ajax-fetchget post && Axios-get post

Fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

get请求 delete

基于springboot的fetch get没有方法体不能上传下载图片

get1按钮是普通get请求不带参数

get2按钮是带参数的请求且含有请求头

get3按钮是把带的参数封装json

delet按钮删除与get相似

html 复制代码

<div class="container">
    <button class="btn fget1 btn-primary btn-sm">fetch - get1</button>
    <button class="btn fget2 btn-info btn-sm">fetch - get2</button>
    <button class="btn fget3 btn-info btn-sm">fetch - get3</button>
    <button class="btn fdelete btn-success btn-sm" onclick="del(999)">fetch - delete</button>
</div>
<script>
    let fget1 = document.querySelector('.fget1')
    fget1.onclick = function () {
//http://localhost:8080/get1 res.text()文本字符串 res.json()对象
        fetch('/get1').then(res => res.text()).then(data => {
            console.log(data)
        }).catch(err => {
            console.log('请求错误')
        })
    }

    //fetch get 向后端接口传值，后端接口接值，并处理值直接输出让前端接收
    //?a=10&b=20 {code:200,result:30}
    let fget2 = document.querySelector('.fget2')
    fget2.onclick = async () => {
        const res = await fetch('/get2?a=10&b=20&user=李四', {
            method: 'GET',
            headers: {
                tk: '123111111111111111111111111'
            }
        })
        const data = await res.json()
        console.log(data)
        console.log(data.code)
        console.log(data.result)
    }

    //fetch delete
    let fdelete = document.querySelector('.fdelete')
    const del = async (id) => {
        const res = await fetch(`/delete?id=${id}`, {
            method: 'DELETE'
        })
        const data = await res.json()
        console.log(data)
        console.log(data.code)
        console.log(data.id)
        console.log(data.msg)
    }

    let fget3 = document.querySelector('.fget3')
    fget3.onclick = async () => {
        const res = await fetch('/get3?id=10&name=李四', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                tk: '123111111111111111111111111'
            }
        })
        const data = await res.json()
        console.log(data)

    }


</script>

java 复制代码

@RestController
@CrossOrigin
public class fetch01 {
    @GetMapping("/get1")
    @CrossOrigin
    public Map<String, Object> get1( ) {
        Map<String, Object> map = new HashMap<>();
        map.put("code", 200);
        map.put("msg", "信息获取完成");
        return map;
    }


    @GetMapping("/get2")
    @CrossOrigin
    public Map<String, Object> get2(
            @RequestParam(required = true,name = "id",defaultValue = "1000") int id ,String name
            ,@RequestHeader("tk") String token
           ) {
        Map<String, Object> map = new HashMap<>();
        map.put("code", 200);
        map.put("msg", "信息获取完成");
          map.put("tk", token);
        return map;
    }

   let fget3 = document.querySelector('.fget3')
    fget3.onclick = async () => {
        const res = await fetch('/get3?id=10&name=李四', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                tk: '123111111111111111111111111'
            }
        })
        const data = await res.json()
        console.log(data)

    }

    @DeleteMapping("/delete")
    @CrossOrigin
    public Map<String, Object> delete(int id ) {
        Map<String, Object> map = new HashMap<>();
        map.put("code", 200);
        map.put("id", id);
        map.put("msg", "删除成功");
        return map;
    }

}

Post请求

主要区别'Content-Type': 'application/x-www-form-urlencoded'

'Content-Type': 'application/json'

传入参数的时候需要加个注解

参数传输的格式

三种常见Content-Type格式，最后一种你肯定用过_content-type: application/json_前端呆头鹅的博客-CSDN博客

html 复制代码

<body>
<div class="container">
    <button class="btn fget1 btn-primary btn-sm">fetch - post1</button>
    <button class="btn fget2 btn-info btn-sm">fetch - post2</button>
</div>
<script>
    let get = document.querySelector('.fget1')
    get.onclick = async function () {
        const resp = await fetch('/post', {
            method: 'post', /*和post一样*/
            /*  body: "id=999&name=张三丰", //User user*/
            body: JSON.stringify({id: 999, name: '缍三'}),
            headers: {
                /*   'Content-Type': 'application/x-www-form-urlencoded', //User user*/
                'Content-Type': 'application/json',// @RequestBody User user
                tk: '123111111111111111111111111put'
            }
        })
        const data = await resp.json();
        console.log(data)
    }

    let get1 = document.querySelector('.fget2')
    get1.onclick = async function () {
        const resp = await fetch('/post1', {
            method: 'post', /*和post一样*/
            body: "id=999&name=张三丰", //User user
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded', //User user
                tk: '123111111111111111111111111put'
            }
        })
        const data = await resp.json();
        console.log(data)
    }

</script>
</body>

后端

java 复制代码

@RestController
@CrossOrigin
public class fetchpost {
    @PostMapping("/post")
    @CrossOrigin
    public Map<String, Object> post(@RequestBody User user, @RequestHeader("tk") String token) {
        Map<String, Object> map = new HashMap<>();
        map.put("code", 200);
        map.put("msg", "信息获取完成");
        map.put("user", user);
        map.put("token", token);
        return map;
    }

    @PostMapping("/post1")
    @CrossOrigin
    public Map<String, Object> post1( User user, @RequestHeader("tk") String token) {
        Map<String, Object> map = new HashMap<>();
        map.put("code", 200);
        map.put("msg", "信息获取完成");
        map.put("user", user);
        map.put("token", token);
        return map;
    }

}

Axios-get post

get方式

html 复制代码

<button class="get1">get1</button>

<script>
   /*axios.defaults.baseURL = 'http://localhost';*/  //跨域的时候加上
  axios.defaults.headers.common['token'] = '321321321';
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //User user

  let get1 = document.querySelector('.get1')
  get1.onclick = async function () {
      const data = await axios({
          url: '/get10',
          method: 'GET',
          params: {id: 10, name: '李四6'},
          headers: {
              'content-type': 'application/x-www-form-urlencoded', //@RequestBody User user*/
          }
      })
      console.log(data.data)
  }
</script>

后端

java 复制代码

@RestController
@CrossOrigin
public class axion {
@GetMapping("/get10")
    @CrossOrigin
    public Map<String, Object> get2(User user, int id, String name, @RequestHeader String token) {
        Map<String, Object> map = new HashMap<>();
        map.put("code", 200);
        map.put("msg", "信息获取完成");
        map.put("user", user);
        map.put("id", id);
        map.put("name", name);
        map.put("token", token);
        return map;
  }  }

POST方式

html 复制代码

<script>
   /*axios.defaults.baseURL = 'http://localhost';*/  //跨域的时候加上
  axios.defaults.headers.common['token'] = '321321321';
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //User user

   let post = document.querySelector('.post')
   post.onclick = async function () {
       /* const data = await axios.get('/get200', {params: {id:999, name: 'jack'}})*/
       const data = await axios({
           url: '/post100',
           method: 'POST',
          /* body:{'name':'李四'},*/
           data: {name: '李强', id: 33333},
           headers: {
               'content-type': 'application/json', //@RequestBody User user
           }
       })
       console.log(data.data)
   }
</script>

后端

java 复制代码

 @PostMapping("/post100")
    @CrossOrigin
    public Map<String, Object> post100(@RequestBody User user, @RequestHeader String token) {
        Map<String, Object> map = new HashMap<>();
        map.put("code", 200);
        map.put("msg", "信息获取完成");
        map.put("user", user);
        map.put("token", token);
        return map;
    }