本人专心后端,但在完成页面碰到了交互,选择了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. Vue项目二、vue-cli2.x脚手架搭建build文件夹及config文件夹详解

    build文件夹下 build.js 'use strict' // js的严格模式 require('./check-versions')() // node和npm的版本检查 process.en ...

  2. 04 namenode和datanode

    namenode元数据管理 1.什么是元数据? hdfs的目录结构及每一个文件的块信息(块的id,块的副本数量,块的存放位置<datanode>) 2.元数据由谁负责管理? namenod ...

  3. Java中的IO与NIO

    前文开了高并发学习的头,文末说了将会选择NIO.RPC相关资料做进一步学习,所以本文开始学习NIO知识. IO知识回顾 在学习NIO前,有必要先回顾一下IO的一些知识. IO中的流 Java程序通过流 ...

  4. (转)const的内部链接属性(C++中适用)

    转载自:http://xiangwangfeng.com/2011/05/02/const%E7%9A%84%E5%86%85%E9%83%A8%E9%93%BE%E6%8E%A5%E5%B1%9E% ...

  5. 【Linux】linux系统管理---好用的一些开源工具

    目录 linux系统管理---好用的一些开源工具 htop dstat Glances iftop nethogs iotop linux系统管理---好用的一些开源工具 htop htop是一款运行 ...

  6. ECNU 计算机系统 (CSAPP) 教材习题作业答案集

    这里是华东师范大学计算机系统的作业答案.由于几乎每一年布置的习题都几乎相同,网上的答案又比较分散,就把自己上学期提交的作业pdf放上来了,供参考. 长这样 Download Link:http://c ...

  7. java学习笔记(1)——有关接口

    接口: interface intf0{ public void doSomething(); } interface intf1{ public void doAnything(); } class ...

  8. [Alg] 文本匹配-单模匹配与多模匹配

    实际场景: 网站的用户发了一些帖子S1, S2,...,网站就要审核一下这些帖子里有没有敏感词. 1. 如果网站想查一下帖子里有没有一个敏感词P,这个文本匹配要怎么做更快? 2. 如果网站想查一下帖子 ...

  9. 2000字读懂Java的来源

    title: Java的来源 blog: CSDN data: Java学习路线及视频 1.Java市场 截至2020-03: Java的市场份额为17.78% 2. Java语言简介 是SUN(St ...

  10. 零售CRM系统开发的核心功能

    在零售行业中,客户关系管理系统是一个包含销售,市场营销和客户服务流程的中央枢纽.它为企业所有者提供了一种可以结合所有与销售有关的问题并管理销售流程的有效工具.零售CRM可以留住客户,提供个性化的一流客 ...