浏览器自带的fetch函数发送GET POST请求,发送POST form数据

fetch是浏览器内置的API,用于发送网络请求,支持GET和POST等操作。它返回Promise,可配合then和catch处理异步数据。示例展示了GET和POST请求的使用,包括JSON数据和FormData的发送。
摘要由CSDN通过智能技术生成

fetch 是浏览器自带的函数,用于发送网络请求。fetch 方法返回一个 Promise 对象,可以通过链式调用 then 方法处理响应数据,或者通过 catch 方法捕获错误信息。它支持 Promise 和异步/await 两种调用方式。‘

以下是一个示例代码,展示如何使用 fetch 进行 GET 请求:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码中,首先使用 fetch 方法发送了一个 GET 请求,并指定了请求的 URL。然后,通过 then 方法对请求返回的 Response 对象进行处理,使用 json() 方法将响应体转换为 JSON 格式的数据,最后将数据打印到控制台中。如果请求出错,则使用 catch 方法捕获错误并打印到控制台中。

除了 GET 请求,还可以通过 fetch 发送 POST 请求,示例代码如下:

const requestBody = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify(requestBody),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码中,通过指定 method 参数为 'POST',并在请求的 body 参数中设置请求体内容,使用 JSON.stringify() 方法将请求体转换为 JSON 格式的字符串。另外,还可以通过 headers 参数设置请求头,将请求体的类型指定为 'application/json'。最后,通过 then 方法对请求返回的数据进行处理,将响应体转换为 JSON 格式的数据并打印到控制台中。如果请求出错,则使用 catch 方法捕获错误并打印到控制台中。

需要注意的是,fetch 方法返回一个 Promise 对象,因此需要使用 thencatch 方法进行异步处理。此外,在发送 POST 请求时,需要设置请求头的 'Content-Type' 参数为 'application/json',并将请求体使用 JSON.stringify() 方法进行序列化。

POST发送form数据

const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('password', '123456');

fetch('https://example.com/login', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您是想通过编程向网页发送数据,可以使用以下方法: 1. 使用表单提交(Form Submit):在HTML页面中添加一个表单元素(form),设置表单的method为POST或GET,设置表单的action为目标URL,然后在表单中添加需要提交的数据字段(input),最后在表单中添加一个提交按钮(button)即可。 示例代码: ```html <form method="POST" action="https://www.example.com/submit"> <input type="text" name="username"> <input type="password" name="password"> <button type="submit">提交</button> </form> ``` 2. 使用AJAX请求(XMLHttpRequest):在JavaScript代码中使用XMLHttpRequest对象发送HTTP请求,将需要提交的数据JSON格式封装在请求体中,并设置请求头中的Content-Type为application/json。 示例代码: ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://www.example.com/submit'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 200) { alert('提交成功'); } else { alert('提交失败'); } }; var data = {username: 'john', password: '123456'}; xhr.send(JSON.stringify(data)); ``` 3. 使用fetch API:在JavaScript代码中使用fetch函数发送HTTP请求,将需要提交的数据JSON格式封装在请求体中,并设置请求头中的Content-Type为application/json。 示例代码: ```javascript fetch('https://www.example.com/submit', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({username: 'john', password: '123456'}) }).then(function(response) { if (response.ok) { alert('提交成功'); } else { alert('提交失败'); } }); ``` 当然,在实际应用中,您可能需要根据具体的需求选择不同的方法来发送数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值