Rewrite JSON project with Fetch
上传 JSON 数据
使用fetch()来发布json编码的数据。
var url = 'https://example.com/profile';
var data = {username: 'example'}; fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
上传文件
可以使用HTML<input type="file" />输入元素、FormData()和fetch()上传文件。
var formData = new FormData();
var fileField = document.querySelector("input[type='file']"); formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]); fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
上传多个文件
可以使用HTML<input type="file" />输入元素、FormData()和fetch()上传文件。
var formData = new FormData();
var photos = document.querySelector("input[type='file'][multiple]"); formData.append('title', 'My Vegas Vacation');
formData.append('photos', photos.files); fetch('https://example.com/posts', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));
Rewrite JSON project with Fetch的更多相关文章
- Rewrite JSON with Fetch
1.重写json请求部分:HTML文件代码如下:<html>......<script> var myList = document.querySelector(‘ul‘); ...
- Using Fetch to rewrite JSON
截图如下: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- Rewrite json
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Fetch:下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...
- 这个东西,写C++插件的可以用到。 RapidJSON —— C++ 快速 JSON 解析器和生成器
点这里 原文: RapidJSON —— C++ 快速 JSON 解析器和生成器 时间 2015-04-05 07:33:33 开源中国新闻原文 http://www.oschina.net/p/ ...
- fetch简明学习
前面的话 Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fetch()方法,该方法提供了一种简单,合乎逻辑的方式来跨网 ...
- angular-cli.json常见配置
{ "project": { "name": "ng-admin", //项目名称 "ejected": false / ...
- angular-cli.json配置参数解释,以及依稀常用命令的通用关键参数解释
一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 &quo ...
- 使用Vue cli3搭建一个用Fetch Api的组件
系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...
随机推荐
- -bash: yum: command not found
在学习Linux时,发现yum命令无法执行.便查了下,整理成文. yum介绍 Yum(全称为 Yellow dogUpdater, Modified)是一个在Fedora和RedHat以及CentOS ...
- Python——字符串
p ython——字符串 ①加法 连接两个字符串 ②乘法 复制字符串 python——转义字符 \n 换行 \' 单引号 \'' 双引号 \\ 反斜杠 raw字符串:无视转义字符 转义: 字符串 ...
- LoadRunner学习笔记(二)
LoadRunner Controller简介: 当虚拟用户脚本开发完成后,使用controller将这个执行脚本的用户从单用户转化为多用户,从而,模拟大量用户操作, 进而形成负债(多用户单循环,多用 ...
- 十 LVS 负载均衡
回顾nginx 反向代理负载均衡 负载均衡的妙用 负载均衡(Load Balance)集群提供了一种廉价.有效.透明的方法, 来扩展网络设备和服务器的负载.带宽.增加吞吐量.加强网络数据处理能力. 提 ...
- 一次String的错误使用
今日,在写代码的过程中,程序执行一个方法居然出现了heap space溢出的异常. 从来还没有遇到这样的异常,打断点发现是做字符串拼接时出现此异常. 所以知道了是String使用的异常,因为我做的操作 ...
- 学习笔记_J2EE_Spring(一)_入门
3. Spring概述 3.1. Spring是什么 Spring是一个优秀的高可用的JavaEE轻量级开发框架.提供一站式开发解决方案. 3.2. Spring框架出现的背景 在世 ...
- rsync拉取服务器上的代码到本地
#!/bin/sh ];then echo "The parameters must be input:file path and host" read -p "(Exa ...
- 2018-2019-2 网络对抗技术 20165328 Exp2 后门原理与实践
实验内容: 任务一:使用netcat获取主机操作Shell,cron启动任务二:使用socat获取主机操作Shell, 任务计划启动任务三:使用MSF meterpreter(或其他软件)生成可执行文 ...
- java日期间相隔年月日计算
/** * 获取date1相距date2多少天, date2>date1 * @param date1 * @param date2 * @return ...
- sqlserver2008 触发器备份 20170811
-------------触发器-----------------------------------------------base-----NO if (object_id('trigger_JP ...