前端发送get请求带参数
时间: 2023-08-08 09:10:18 浏览: 60
前端发送 get 请求带参数的方式有两种,一种是直接将参数添加到 URL 的末尾,另一种是使用 URLSearchParams 对象将参数封装成对象,然后作为 fetch 请求的参数传递。
第一种方式的示例代码如下:
```javascript
// 假设需要传递两个参数,分别是 name 和 age
const name = 'Tom';
const age = 18;
// 将参数添加到 URL 的末尾
const url = `http://example.com/api?name=${name}&age=${age}`;
// 发送 get 请求
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```
第二种方式的示例代码如下:
```javascript
// 创建 URLSearchParams 对象,设置参数
const params = new URLSearchParams();
params.set('name', 'Tom');
params.set('age', '18');
// 将参数作为 fetch 请求的参数传递
fetch('http://example.com/api', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
body: params
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```
需要注意的是,第二种方式需要在 fetch 请求中显式设置 method 为 GET,同时需要设置合适的请求头 Content-Type。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)