本人专心后端,但在完成页面碰到了交互,选择了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与后端交互的更多相关文章

  1. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

  2. AJAX-前后端交互的艺术

    AJAX-前后端交互的艺术 为什么要用AJAX? 当我们通过提交表单向服务器提交内容,或者进行一些其他操作,均涉及到了与浏览器之间的交互,传统的方式与AJAX方式的处理方法是不同的 传统方式:用户触发 ...

  3. js前后端交互

    1.前后端交互模式 2.promise用法 (1)异步调用 (2)ajax回顾 (3).promise 优点:可以解决回调地狱(多层异步调用嵌套问题)(解决代码可读性低的问题) 提供简洁的api (4 ...

  4. Vue - 与后端交互

    零:与后端交互 - ajax 版本1 - 出现了跨域问题 前端:index.html <!DOCTYPE html> <html lang="en"> &l ...

  5. Vue之前后端交互

    Vue之前后端交互 一.前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责 ...

  6. 三、vue前后端交互(轻松入门vue)

    轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...

  7. 窗口 - dialog - 与后端交互

    与后端交互,一般需要提交表单数据,所以,这次渲染得dialog其实是一个<form> <form id="loginForm"> <table ali ...

  8. Node之简单的前后端交互

    node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...

  9. Django之META与前后端交互

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

随机推荐

  1. python切片使用方法(超详细)

    #切片:就是根据一个下标范围来获取一部分数据,切片通常结合字符串,列表,元组使用 # 为什么使用切片?因为下标只能获取一个数据,所以想要获取字符串或者列表当中一部分数据需要用切片. # 切片的语法格式 ...

  2. 第四篇(1):企业常用Linux web环境安装配置(apache、php、mysql)

    上篇我们讲了基本的软件包管理和文件操作什么的,现在也要动手安装点有用的东西了吧! 本篇我会写出一个用yum安装apache.php.mysql的方法,最后再运行phpMyAdmin来管理数据库. 1. ...

  3. WEB渗透 - 万能密码

    asp万能密码 'or'='or' aspx万能密码 1: "or "a"="a 2: ')or('a'='a 3:or 1=1-- 4:'or 1=1-- 5 ...

  4. DIY 作品 及 维修 不定时更新

    手机电池DIY充电宝 2块,优质手机电池加一个升压ic ,焊上一个 usb 母头.比买的强多了. 还能调压,最高调到24V 可以带白光焊台. 更换手机 SIM/SD 卡二合一 贴上高温胶带,吹下来. ...

  5. OpenWrt tcpdump 抓包

    路由器用的是 网件的 4300 刷的是石像鬼双固件 1, 安装支持库opkg updateopkg install libpcapopkg install tcpdump 2, 设置条件开始捕获tcp ...

  6. MongoDB复制集概念架构浅析

    一.复制集的作用 (1) 高可用 防止设备(服务器.网络)故障. 提供自动failover 功能. 技术来保证数 (2) 灾难恢复 当发生故障时,可以从其他节点恢复. (3) 功能隔离 用于分析.报表 ...

  7. 使用MySql对IdentityServer4进行持久化

    哈喽大家好,看见网上很少有使用MySql进行持久化的,毕竟又很多坑,说句实话,就连 MySql.Data.EntityFrameworkCore 都有问题,不知道是.net core更新太快还是其它的 ...

  8. Java的反射基础技术

    今天本人给大家讲解一下Java的反射基础技术,如有不对的或者讲的不好的可以多多提出,我会进行相应的更改,先提前感谢提出意见的各位了!!! 什么是反射? 反射它是根据字节码文件可以反射出类的信息.字段. ...

  9. 使用JDBC工具类模拟登陆验证-Java(新手)

    模拟登陆验证: package JdbcDome; import java.sql.Connection; import java.sql.PreparedStatement; import java ...

  10. 为我开发的API添加华丽的外衣

    在日常开发中,最容易被吐槽的就是代码写的烂,没有注释鬼知道你这个是什么意思啊? 另一个就是文档不齐全,这些接口是干嘛的?参数是什么意思?等等问题. 归根到底还是没有严格的开发规范,最重要的还是要有方便 ...