本人专心后端,但在完成页面碰到了交互,选择了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. iview必备技能一、表单验证规则

    iView表单组件使用async-validator验证器对表单域中数据进行验证,给Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. 完整的验 ...

  2. Vuex的理解以及它的辅助函数

    理解:vue中的“单向数据流”,这里借用官网的图示: Vue是单向数据流,v-model只是语法糖而已.单向数据流就是:数据总是[向下传递]从父级组件传递给子组件,只能单向绑定.子组件内部不能直接修改 ...

  3. 开源一个使用python和pyQT实现的产测工具

    导语 之前给朋友友情开发的一个产测工具,现开源,有需要的朋友可以在这个基础上进行二次开发. 操作界面如下 主要特性 自动识别启动信息,然后进入产测写入状态 序列号和MAC地址自动按指定数目增加 每次操 ...

  4. Python网络协议(osi七层协议)

    一 互联网的本质 咱们先不说互联网是如何通信的(发送数据,文件等),先用一个经典的例子,给大家说明什么是互联网通信. 现在追溯到八九十年代,当时电话刚刚兴起,还没有手机的概念,只是有线电话,那么此时你 ...

  5. 今天对C语言不常用的小东西的了解

    今天又翻了C语言的书,看到const语句,一时间想不起来到底是干嘛的,看语句const   int   a=1;明白了这是一个支持常量指定类型的定义常量的关键字,作用几乎与#define一毛一样,但# ...

  6. burpsuit之Spider、Scanner、Intruder模块

    1.spider模块 1.spider模块介绍 被动爬网:(被动爬网获得的链接是手动爬网的时候返回页面的信息中分析发现超链接) 对于爬网的时候遇到HTML表单如何操作: 需要表单身份认证时如何操作(默 ...

  7. C 2016笔试题

    1.下面程序的输出结果是(    ) int x = 3; do { printf(“%d\n”,x -= 2); }while(!(-- x)); 分析:x初始值为3,第一次循环中运行printf函 ...

  8. React && ReactDOM

    如果你是 React 的初学者,一定会对 React 和 ReactDOM 感到迷惑.为什么要分成两个包呢?害得我还要引入两次,说好的减轻开发人员负担呢,这丫的在搞什么飞机.带着这个疑问,我们一起来康 ...

  9. 使用WireShark进行网络流量安全分析

    WireShark的过滤规则 伯克利包过滤(BPF)(应用在wireshark的捕获过滤器上) ** 伯克利包过滤中的限定符有下面的三种:** Type:这种限定符表示指代的对象,例如IP地址,子网或 ...

  10. 【转】不怕难之BlockingQueue及其实现

    1. 前言 BlockingQueue即阻塞队列,它是基于ReentrantLock,依据它的基本原理,我们可以实现Web中的长连接聊天功能,当然其最常用的还是用于实现生产者与消费者模式,大致如下图所 ...