HTTP协议详解-day04

最新推荐文章于 2024-10-12 21:57:00 发布

一口一个大饼

最新推荐文章于 2024-10-12 21:57:00 发布

阅读量69

点赞数 1

分类专栏：网络原理 HTTP协议文章标签： http javascript ajax

本文链接：https://blog.csdn.net/weixin_58480821/article/details/129900433

版权

网络原理同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTTP协议

5 篇文章 0 订阅

订阅专栏

文章介绍了如何使用HTML的form标签构建GET和POST请求，以及如何通过JavaScript的Ajax方法（引入jQuery库）发送GET请求。form表单用于向服务器提交数据，GET请求将参数显示在URL中，而POST请求则将数据隐藏在请求体中。Ajax允许异步发送请求，不刷新整个页面。

摘要由CSDN通过智能技术生成

form表单构建HTTP请求

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求

form 发送 GET 请求

<body>
    <form action="https://www.bilibili.com/" method="GET">
        <input type="text" name="userId">
        <input type="text" name="classId">
        <input type="submit" value="提交">
    </form>
</body>

form 的重要参数:
action: 构造的 HTTP 请求的 URL 。
method: 构造的 HTTP 请求的方法是 GET 还是 POST (form 只支持 GET 和 POST)。

input 的重要参数:
type: 表示输入框的类型. text 表示文本, password 表示密码, submit 表示提交按钮。
name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输入框的用户输入的内容。（发出Get请求时提交的参数在URL中以键值对方式传输，查询字符串query string就是那部分内容，例如：spm=3001.5298）
value: input 标签的值. 对于 type 为 submit 类型来说, value 就对应了按钮上显示的文本

执行结果：
在这里插入图片描述

form 发送 POST请求

<body>
    <form action="https://www.bilibili.com/" method="POST">
        <input type="text" name="userId">
        <input type="text" name="classId">
        <input type="submit" value="提交">
    </form>
</body>

抓包结果：
在这里插入图片描述

ajax构建HTTP请求

ajax：浏览器提供的一种通过JS构造HTTP请求的方式

引入jquery

第一种方式：
1.浏览器搜索jquery cdn
2.打开官网https://jquery.com/
3.找到https://code.jquery.com/jquery-3.6.3.min.js复制此链接
4. 在.html文件中写：<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

第二种方式：
1.直接打开https://code.jquery.com/jquery-3.6.3.min.js链接
2.全选复制源码
3.粘贴到自己的js文件中
4.在.html文件中引用这个js文件<script src=".js文件路径"></script>

ajax发送GET请求

<!--引入jquery-->
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script>
        $ajax({
            type: 'get',
            url: "https://www.csdn.net/",
            //此处的success声明了一个回调函数，
            //这个函数的作用是收到浏览器返回的响应后执行该回调，省去了等待响应的时间
            success:function(data){
                //响应正文部分
                console.log("服务器返回了响应");
            }
        });     
        console.log("代码继续执行");  
    </script>