基于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相似
 

    fetch - get1
    fetch - get2
    fetch - get3
    fetch - delete

a

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


    @GetMapping("/get2")
    @CrossOrigin
    public Map get2(
            @RequestParam(required = true,name = "id",defaultValue = "1000") int id ,String name
            ,@RequestHeader("tk") String token
           ) {
        Map 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 delete(int id ) {
        Map 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博客

    fetch - post1
    fetch - post2

后端

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

}

Axios-get post

get方式

get1

后端

@RestController
@CrossOrigin
public class axion {
@GetMapping("/get10")
    @CrossOrigin
    public Map get2(User user, int id, String name, @RequestHeader String token) {
        Map 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方式

后端

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