各种构造HTTP请求的方法——最简洁，最易懂~

左手的ㄟ右手 2024-04-01 18:35 25阅读 0赞

**目录**

一、通过前端构造的三种方法：

1.1、通过浏览器自己构造

1.2、通过form表单构造

1.3、通过ajax构造

二、通过postman构造

三、通过Postman生成各种语言HTTP请求

--------------------

## 一、通过前端构造的三种方法： ##

### 1.1、通过浏览器自己构造 ###

> 工具：浏览器；

打开你的浏览器，在地址栏里写url，按下回车，就可以构造出get请求；（如下图）

![4d72ab6a36164b2795a68d7d7b29eba8.png][]

--------------------

### 1.2、通过form表单构造 ###

> 工具：vscode；

**步骤一：**在vscode中，创建html文件，构造一个form表单；（具体的如下代码）

> 解释：

*  form表单的关键作用是传递键值对
 *  action是你选择的网页；
 *  method是构造http请求的方法，这里只支持 get 和 post ；
 *  input标签用来构造键值对数据，一个input的就是一个键值对，name表示“键”，用户输入的数据表示“值”，最后通过submit来提交，发送请求
 *  若使用get方法，上述键值对就会存到url的query string中；若使用post方法，上述键值对就会放到body中（格式与query string一样）；

**步骤二：**打开HTML网页，输入你想输入的值；（如下图）

![d2a6c69740d646b29448329cfb225174.png][]

**最后：**网页跳转，地址栏（如下图）

![a8570815ef3842b5bf1a7ce579599046.png][]

--------------------

### 1.3、通过ajax构造 ###

> 工具：vscode，jquery第三方库；
> 
>  *最初ajax主要是借助HTTP传输xml，现在xml用的少了，因此ajax往往用来传输其他数据，例如json；*

form表单构造的数据一定会出发页面跳转，时间慢，开销大，所以并不是一件好事，使用ajax就可以不触发跳转，达到“局部刷新”的效果；

**步骤一：**ajax api是浏览器自带的，原生api不太好用，所以可以使用第三方库，代替原生api；打开jquery官网（js中最知名的第三方库之一），复制script链接；

![9ea00dbed1094a5189b161c6f971fee1.png][]

**步骤二：**输入以下代码；

> 解释：

*  第一个script标签的src属性里的url就是刚刚从第三方库中所获取的；
 *  type表示使用get方法；
 *  url表示选择的网页；
 *  data表示请求中的body部分（以上代码没有写）
 *  success表示当服务器返回正确响应(状态码：200)，浏览器就会调用他对应的函数，处理响应；参数body就是响应的正文；
 *  error表示服务器返回一个错误响应，浏览器就会调用error对应的函数；

**最后：**打开html，打开调试，会观察到如下信息：

![e81c3e1957c44df7b02a4b9c9c0bfa7e.png][]

> 解释原因：

这里出错了；原因是跨域（一个页面在域名a下通过ajax访问域名b的资源），这里浏览器是禁止的，除非跨域的网站返回的响应中告诉浏览器可以；（大部分网站是不可以的）；

> 解决方法：

这里我们可以自己写一个服务器，把页面放到自己的服务器上，让页面访问自己服务器的资源；（这里不展开讲，后期会出博客）；

--------------------

## 二、通过postman构造 ##

> 工具：

属于是一个专门构造HTTP请求的第三方工具，主要是帮助接口测试的，简而言之：它可以用来更方便的构造HTTP请求；

> 具体步骤如下图：

![0c67ad62facb472b8383f81359968c8d.png][]

![719a680d86b9442bac591a973275eafd.png][]

> 最后结果：

![13f0797b7dd64bde921cb9354d07e27f.png][]

--------------------

## 三、通过Postman生成各种语言HTTP请求 ##

> 具体步骤如下图： （简直不要太爽~）

![6364fff7bfee43c7b4e729a9267c05e0.png][]

![ec77645f35504c3ebff2ad5c65687b81.png][]

--------------------

![51150ab00e214cc2a664d167bb720a54.gif][]

[4d72ab6a36164b2795a68d7d7b29eba8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0690320a277f481fb0b77e8d664c3321.png
[d2a6c69740d646b29448329cfb225174.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/999a9cf7239b45c596bf56b3c0612879.png
[a8570815ef3842b5bf1a7ce579599046.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f0fe684c8c2b45dd82bd8ae4168d5819.png
[9ea00dbed1094a5189b161c6f971fee1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/218751f5577b4cb58afbc89c6cf0b033.png
[e81c3e1957c44df7b02a4b9c9c0bfa7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/baa75d6e65cb4f6ab3521aca93f464f9.png
[0c67ad62facb472b8383f81359968c8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/576a5f0da19144f19a981d9b8c244cd0.png
[719a680d86b9442bac591a973275eafd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/989e91550b1c44acbca6122f547086ba.png
[13f0797b7dd64bde921cb9354d07e27f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/af31aaacec4a469d8e5e3d3d424ca457.png
[6364fff7bfee43c7b4e729a9267c05e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4cf07e0f0f7740828c1d821d661a14c4.png
[ec77645f35504c3ebff2ad5c65687b81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ce1af3686bf942c8834a49f703248ce7.png
[51150ab00e214cc2a664d167bb720a54.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/95def6bdf0ae44abad1ed591329228c8.gif