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

    1. <div class="container">
    2.     <button class="btn fget1 btn-primary btn-sm">fetch - get1button>
    3.     <button class="btn fget2 btn-info btn-sm">fetch - get2button>
    4.     <button class="btn fget3 btn-info btn-sm">fetch - get3button>
    5.     <button class="btn fdelete btn-success btn-sm" onclick="del(999)">fetch - deletebutton>
    6. div>
    7. <script>
    8.     let fget1 = document.querySelector('.fget1')
    9.     fget1.onclick = function () {
    10. //http://localhost:8080/get1 res.text()文本字符串 res.json()对象
    11.         fetch('/get1').then(res => res.text()).then(data => {
    12.             console.log(data)
    13.         }).catch(err => {
    14.             console.log('请求错误')
    15.         })
    16.     }
    17.  
    18.     //fetch get 向后端接口传值，后端接口接值，并处理值直接输出让前端接收
    19.     //?a=10&b=20 {code:200,result:30}
    20.     let fget2 = document.querySelector('.fget2')
    21.     fget2.onclick = async () => {
    22.         const res = await fetch('/get2?a=10&b=20&user=李四', {
    23.             method: 'GET',
    24.             headers: {
    25.                 tk: '123111111111111111111111111'
    26.             }
    27.         })
    28.         const data = await res.json()
    29.         console.log(data)
    30.         console.log(data.code)
    31.         console.log(data.result)
    32.     }
    33.  
    34.     //fetch delete
    35.     let fdelete = document.querySelector('.fdelete')
    36.     const del = async (id) => {
    37.         const res = await fetch(`/delete?id=${id}`, {
    38.             method: 'DELETE'
    39.         })
    40.         const data = await res.json()
    41.         console.log(data)
    42.         console.log(data.code)
    43.         console.log(data.id)
    44.         console.log(data.msg)
    45.     }
    46.  
    47.     let fget3 = document.querySelector('.fget3')
    48.     fget3.onclick = async () => {
    49.         const res = await fetch('/get3?id=10&name=李四', {
    50.             method: 'GET',
    51.             headers: {
    52.                 'Content-Type': 'application/json',
    53.                 tk: '123111111111111111111111111'
    54.             }
    55.         })
    56.         const data = await res.json()
    57.         console.log(data)
    58.  
    59.     }
    60.  
    61.  
    62. script>

    a

    1. @RestController
    2. @CrossOrigin
    3. public class fetch01 {
    4.     @GetMapping("/get1")
    5.     @CrossOrigin
    6.     public Map get1( ) {
    7.         Map map = new HashMap<>();
    8.         map.put("code", 200);
    9.         map.put("msg", "信息获取完成");
    10.         return map;
    11.     }
    12.  
    13.  
    14.     @GetMapping("/get2")
    15.     @CrossOrigin
    16.     public Map get2(
    17.             @RequestParam(required = true,name = "id",defaultValue = "1000") int id ,String name
    18.             ,@RequestHeader("tk") String token
    19.            ) {
    20.         Map map = new HashMap<>();
    21.         map.put("code", 200);
    22.         map.put("msg", "信息获取完成");
    23.           map.put("tk", token);
    24.         return map;
    25.     }
    26.  
    27.    let fget3 = document.querySelector('.fget3')
    28.     fget3.onclick = async () => {
    29.         const res = await fetch('/get3?id=10&name=李四', {
    30.             method: 'GET',
    31.             headers: {
    32.                 'Content-Type': 'application/json',
    33.                 tk: '123111111111111111111111111'
    34.             }
    35.         })
    36.         const data = await res.json()
    37.         console.log(data)
    38.  
    39.     }
    40.  
    41.     @DeleteMapping("/delete")
    42.     @CrossOrigin
    43.     public Map delete(int id ) {
    44.         Map map = new HashMap<>();
    45.         map.put("code", 200);
    46.         map.put("id", id);
    47.         map.put("msg", "删除成功");
    48.         return map;
    49.     }
    50.  
    51. }

    Post请求

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

    'Content-Type': 'application/json'

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

    参数传输的格式

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

    1. <body>
    2. <div class="container">
    3.     <button class="btn fget1 btn-primary btn-sm">fetch - post1button>
    4.     <button class="btn fget2 btn-info btn-sm">fetch - post2button>
    5. div>
    6. <script>
    7.     let get = document.querySelector('.fget1')
    8.     get.onclick = async function () {
    9.         const resp = await fetch('/post', {
    10.             method: 'post', /*和post一样*/
    11.             /*  body: "id=999&name=张三丰", //User user*/
    12.             body: JSON.stringify({id: 999, name: '缍三'}),
    13.             headers: {
    14.                 /*   'Content-Type': 'application/x-www-form-urlencoded', //User user*/
    15.                 'Content-Type': 'application/json',// @RequestBody User user
    16.                 tk: '123111111111111111111111111put'
    17.             }
    18.         })
    19.         const data = await resp.json();
    20.         console.log(data)
    21.     }
    22.  
    23.     let get1 = document.querySelector('.fget2')
    24.     get1.onclick = async function () {
    25.         const resp = await fetch('/post1', {
    26.             method: 'post', /*和post一样*/
    27.             body: "id=999&name=张三丰", //User user
    28.             headers: {
    29.                'Content-Type': 'application/x-www-form-urlencoded', //User user
    30.                 tk: '123111111111111111111111111put'
    31.             }
    32.         })
    33.         const data = await resp.json();
    34.         console.log(data)
    35.     }
    36.  
    37. script>
    38. body>

    后端

    1. @RestController
    2. @CrossOrigin
    3. public class fetchpost {
    4.     @PostMapping("/post")
    5.     @CrossOrigin
    6.     public Map post(@RequestBody User user, @RequestHeader("tk") String token) {
    7.         Map map = new HashMap<>();
    8.         map.put("code", 200);
    9.         map.put("msg", "信息获取完成");
    10.         map.put("user", user);
    11.         map.put("token", token);
    12.         return map;
    13.     }
    14.  
    15.     @PostMapping("/post1")
    16.     @CrossOrigin
    17.     public Map post1( User user, @RequestHeader("tk") String token) {
    18.         Map map = new HashMap<>();
    19.         map.put("code", 200);
    20.         map.put("msg", "信息获取完成");
    21.         map.put("user", user);
    22.         map.put("token", token);
    23.         return map;
    24.     }
    25.  
    26. }

    Axios-get post

    get方式

    1. <button class="get1">get1button>
    2.  
    3. <script>
    4.    /*axios.defaults.baseURL = 'http://localhost';*/  //跨域的时候加上
    5.   axios.defaults.headers.common['token'] = '321321321';
    6.   axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //User user
    7.  
    8.   let get1 = document.querySelector('.get1')
    9.   get1.onclick = async function () {
    10.       const data = await axios({
    11.           url: '/get10',
    12.           method: 'GET',
    13.           params: {id: 10, name: '李四6'},
    14.           headers: {
    15.               'content-type': 'application/x-www-form-urlencoded', //@RequestBody User user*/
    16.           }
    17.       })
    18.       console.log(data.data)
    19.   }
    20. script>

    后端

    1. @RestController
    2. @CrossOrigin
    3. public class axion {
    4. @GetMapping("/get10")
    5.     @CrossOrigin
    6.     public Map get2(User user, int id, String name, @RequestHeader String token) {
    7.         Map map = new HashMap<>();
    8.         map.put("code", 200);
    9.         map.put("msg", "信息获取完成");
    10.         map.put("user", user);
    11.         map.put("id", id);
    12.         map.put("name", name);
    13.         map.put("token", token);
    14.         return map;
    15.   }  }

    POST方式

    1. <script>
    2.    /*axios.defaults.baseURL = 'http://localhost';*/  //跨域的时候加上
    3.   axios.defaults.headers.common['token'] = '321321321';
    4.   axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //User user
    5.  
    6.    let post = document.querySelector('.post')
    7.    post.onclick = async function () {
    8.        /* const data = await axios.get('/get200', {params: {id:999, name: 'jack'}})*/
    9.        const data = await axios({
    10.            url: '/post100',
    11.            method: 'POST',
    12.           /* body:{'name':'李四'},*/
    13.            data: {name: '李强', id: 33333},
    14.            headers: {
    15.                'content-type': 'application/json', //@RequestBody User user
    16.            }
    17.        })
    18.        console.log(data.data)
    19.    }
    20. script>

    后端

    1.  @PostMapping("/post100")
    2.     @CrossOrigin
    3.     public Map post100(@RequestBody User user, @RequestHeader String token) {
    4.         Map map = new HashMap<>();
    5.         map.put("code", 200);
    6.         map.put("msg", "信息获取完成");
    7.         map.put("user", user);
    8.         map.put("token", token);
    9.         return map;
    10.     }

  • 相关阅读:
    VUE：可收缩工具栏
    LeetCode算法心得——全排列（回溯型排列）
    索尼 toio™ 应用创意开发征文 | 如何用Python控制Q宝进行机器人擂台赛
    redis
    使用Docker本地安装部署Drawio绘图工具并实现公网访问
    基于技能的工程方法及其在I4.0 中的应用
    等变性的AI：从离散到连续
    POJ 3320 Jessica‘s Reading Problem 尺取法
    （附源码）springboot农田灌溉设施管理系统 毕业设计 260931
    Tomcat颁布自定义SSL(Https)证书
  • 原文地址：https://blog.csdn.net/Wdasdasda/article/details/132816271