码迷,mamicode.com
首页 > Web开发 > 详细

Rewrite JSON project with Fetch

时间:2018-12-24 13:18:37      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:rewrite   hot   efi   ade   sts   web   for   ror   write   

上传 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   hot   efi   ade   sts   web   for   ror   write   

原文地址:https://www.cnblogs.com/DJOSIMON/p/10167977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!