小白快速使用fetch与后端交互
本人专心后端,但在完成页面碰到了交互,选择了fetch来完成,
总结了一下简单的使用fetch的方法。
fetch是纯原生JS与后端交互的方法,请注意,Fetch规格不同于jQuery.ajax(),主要体现在两个方面:
- 即使响应是HTTP 404或500,从 fetch() 返回的Promise也不会拒绝HTTP错误状态。相反,它将正常解析(ok状态设置为false),并且它只会在网络故障时拒绝,或者如果任何东西阻止了请求的完成
- 默认情况下, 如果站点依靠维护用户会话(发送cookie,必须设置credentials init选项),则fetch不会发送或接收来自服务器的任何cookie,从而导致未经身份验证的请求。
使用如下的Js代码,即可请求到相关的接口,data是作者自己定的名称,相当于参数,可以修改
//储存得到的数据
var myJson;
fetch('/users.html')
.then(function(response) {
return response.json()
}).then(function(data) {
myJson=data;
})
如果需要添加请求的json,或者更多的定制请求,稍加修改即可
fetch('/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Hubot',
login: 'hubot',
})
})
小白快速使用fetch与后端交互的更多相关文章
- springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
- AJAX-前后端交互的艺术
AJAX-前后端交互的艺术 为什么要用AJAX? 当我们通过提交表单向服务器提交内容,或者进行一些其他操作,均涉及到了与浏览器之间的交互,传统的方式与AJAX方式的处理方法是不同的 传统方式:用户触发 ...
- js前后端交互
1.前后端交互模式 2.promise用法 (1)异步调用 (2)ajax回顾 (3).promise 优点:可以解决回调地狱(多层异步调用嵌套问题)(解决代码可读性低的问题) 提供简洁的api (4 ...
- Vue - 与后端交互
零:与后端交互 - ajax 版本1 - 出现了跨域问题 前端:index.html <!DOCTYPE html> <html lang="en"> &l ...
- Vue之前后端交互
Vue之前后端交互 一.前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责 ...
- 三、vue前后端交互(轻松入门vue)
轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...
- 窗口 - dialog - 与后端交互
与后端交互,一般需要提交表单数据,所以,这次渲染得dialog其实是一个<form> <form id="loginForm"> <table ali ...
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...
- Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
随机推荐
- python切片使用方法(超详细)
#切片:就是根据一个下标范围来获取一部分数据,切片通常结合字符串,列表,元组使用 # 为什么使用切片?因为下标只能获取一个数据,所以想要获取字符串或者列表当中一部分数据需要用切片. # 切片的语法格式 ...
- 第四篇(1):企业常用Linux web环境安装配置(apache、php、mysql)
上篇我们讲了基本的软件包管理和文件操作什么的,现在也要动手安装点有用的东西了吧! 本篇我会写出一个用yum安装apache.php.mysql的方法,最后再运行phpMyAdmin来管理数据库. 1. ...
- WEB渗透 - 万能密码
asp万能密码 'or'='or' aspx万能密码 1: "or "a"="a 2: ')or('a'='a 3:or 1=1-- 4:'or 1=1-- 5 ...
- DIY 作品 及 维修 不定时更新
手机电池DIY充电宝 2块,优质手机电池加一个升压ic ,焊上一个 usb 母头.比买的强多了. 还能调压,最高调到24V 可以带白光焊台. 更换手机 SIM/SD 卡二合一 贴上高温胶带,吹下来. ...
- OpenWrt tcpdump 抓包
路由器用的是 网件的 4300 刷的是石像鬼双固件 1, 安装支持库opkg updateopkg install libpcapopkg install tcpdump 2, 设置条件开始捕获tcp ...
- MongoDB复制集概念架构浅析
一.复制集的作用 (1) 高可用 防止设备(服务器.网络)故障. 提供自动failover 功能. 技术来保证数 (2) 灾难恢复 当发生故障时,可以从其他节点恢复. (3) 功能隔离 用于分析.报表 ...
- 使用MySql对IdentityServer4进行持久化
哈喽大家好,看见网上很少有使用MySql进行持久化的,毕竟又很多坑,说句实话,就连 MySql.Data.EntityFrameworkCore 都有问题,不知道是.net core更新太快还是其它的 ...
- Java的反射基础技术
今天本人给大家讲解一下Java的反射基础技术,如有不对的或者讲的不好的可以多多提出,我会进行相应的更改,先提前感谢提出意见的各位了!!! 什么是反射? 反射它是根据字节码文件可以反射出类的信息.字段. ...
- 使用JDBC工具类模拟登陆验证-Java(新手)
模拟登陆验证: package JdbcDome; import java.sql.Connection; import java.sql.PreparedStatement; import java ...
- 为我开发的API添加华丽的外衣
在日常开发中,最容易被吐槽的就是代码写的烂,没有注释鬼知道你这个是什么意思啊? 另一个就是文档不齐全,这些接口是干嘛的?参数是什么意思?等等问题. 归根到底还是没有严格的开发规范,最重要的还是要有方便 ...