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

目录

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

1.1、通过浏览器自己构造

1.2、通过form表单构造

1.3、通过ajax构造

二、通过postman构造

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


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

1.1、通过浏览器自己构造

工具:浏览器;

        打开你的浏览器,在地址栏里写url,按下回车,就可以构造出get请求;(如下图)


1.2、通过form表单构造

工具:vscode;

        步骤一:在vscode中,创建html文件,构造一个form表单;(具体的如下代码)

<body>
    <form action="https://cn.bing.com/" method="get">
        <input type="text" name="a">
        <input type="text" name="b">
        <input type="submit" value="提交">
    </form>
</body>

解释:

  • 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="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url:'https://cn.bing.com/',
            success: function(body) {
                //服务器返回正确响应(状态码:200),浏览器就会调用这个函数,处理响应;
                //参数body就是响应的正文
                console.log("OK~");//打印日志
            },
            error: function() {
                //服务器返回一个错误响应,浏览器就会调用error对应的函数
                console.log("error~");//打印日志
            }
        })
    </script>

解释:

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

        最后:打开html,打开调试,会观察到如下信息:

解释原因:

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

解决方法:

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


二、通过postman构造

工具:

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

具体步骤如下图:

 最后结果:


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

具体步骤如下图: (简直不要太爽~)

        

 


 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈亦康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值