杭州行业网站建设公司,网龙网络公司排名,网站广告联盟平台,筹划电子商务网站建设Fetch Fetch API 提供了一个 JavaScript 接口#xff0c;用于访问和操纵 HTTP 管道的一些具体部分#xff0c;例如请求和响应。它还提供了一个全局 fetch() 方法#xff0c;该方法提供了一种简单#xff0c;合理的方式来跨网络异步获取资源。 这种功能以前是使用 XMLHttpRe…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相似 div classcontainerbutton classbtn fget1 btn-primary btn-smfetch - get1/buttonbutton classbtn fget2 btn-info btn-smfetch - get2/buttonbutton classbtn fget3 btn-info btn-smfetch - get3/buttonbutton classbtn fdelete btn-success btn-sm onclickdel(999)fetch - delete/button
/div
scriptlet 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 向后端接口传值后端接口接值并处理值直接输出让前端接收//?a10b20 {code:200,result:30}let fget2 document.querySelector(.fget2)fget2.onclick async () {const res await fetch(/get2?a10b20user李四, {method: GET,headers: {tk: 123111111111111111111111111}})const data await res.json()console.log(data)console.log(data.code)console.log(data.result)}//fetch deletelet 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?id10name李四, {method: GET,headers: {Content-Type: application/json,tk: 123111111111111111111111111}})const data await res.json()console.log(data)}/script a RestController
CrossOrigin
public class fetch01 {GetMapping(/get1)CrossOriginpublic MapString, Object get1( ) {MapString, Object map new HashMap();map.put(code, 200);map.put(msg, 信息获取完成);return map;}GetMapping(/get2)CrossOriginpublic MapString, Object get2(RequestParam(required true,name id,defaultValue 1000) int id ,String name,RequestHeader(tk) String token) {MapString, 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?id10name李四, {method: GET,headers: {Content-Type: application/json,tk: 123111111111111111111111111}})const data await res.json()console.log(data)}DeleteMapping(/delete)CrossOriginpublic MapString, Object delete(int id ) {MapString, 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博客 body
div classcontainerbutton classbtn fget1 btn-primary btn-smfetch - post1/buttonbutton classbtn fget2 btn-info btn-smfetch - post2/button
/div
scriptlet get document.querySelector(.fget1)get.onclick async function () {const resp await fetch(/post, {method: post, /*和post一样*//* body: id999name张三丰, //User user*/body: JSON.stringify({id: 999, name: 缍三}),headers: {/* Content-Type: application/x-www-form-urlencoded, //User user*/Content-Type: application/json,// RequestBody User usertk: 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: id999name张三丰, //User userheaders: {Content-Type: application/x-www-form-urlencoded, //User usertk: 123111111111111111111111111put}})const data await resp.json();console.log(data)}/script
/body 后端 RestController
CrossOrigin
public class fetchpost {PostMapping(/post)CrossOriginpublic MapString, Object post(RequestBody User user, RequestHeader(tk) String token) {MapString, Object map new HashMap();map.put(code, 200);map.put(msg, 信息获取完成);map.put(user, user);map.put(token, token);return map;}PostMapping(/post1)CrossOriginpublic MapString, Object post1( User user, RequestHeader(tk) String token) {MapString, 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方式 button classget1get1/buttonscript/*axios.defaults.baseURL http://localhost;*/ //跨域的时候加上axios.defaults.headers.common[token] 321321321;axios.defaults.headers.post[Content-Type] application/x-www-form-urlencoded; //User userlet 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 后端 RestController
CrossOrigin
public class axion {
GetMapping(/get10)CrossOriginpublic MapString, Object get2(User user, int id, String name, RequestHeader String token) {MapString, 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方式 script/*axios.defaults.baseURL http://localhost;*/ //跨域的时候加上axios.defaults.headers.common[token] 321321321;axios.defaults.headers.post[Content-Type] application/x-www-form-urlencoded; //User userlet 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 后端 PostMapping(/post100)CrossOriginpublic MapString, Object post100(RequestBody User user, RequestHeader String token) {MapString, Object map new HashMap();map.put(code, 200);map.put(msg, 信息获取完成);map.put(user, user);map.put(token, token);return map;}
