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

目录

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

1.1、通过浏览器自己构造

1.2、通过form表单构造

1.3、通过ajax构造

二、通过postman构造

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

---

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

1.1、通过浏览器自己构造

工具：浏览器；

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

---

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网页，输入你想输入的值；（如下图）

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

---

1.3、通过ajax构造

工具：vscode，jquery第三方库；

        最初ajax主要是借助HTTP传输xml，现在xml用的少了，因此ajax往往用来传输其他数据，例如json；

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

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

         步骤二：输入以下代码；

解释：

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

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

解释原因：

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

解决方法：

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

---

二、通过postman构造

工具：

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

具体步骤如下图：

 最后结果：

---

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

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

        

 

---