通过form表单，ajax构造HTTP请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了通过form表单，ajax构造HTTP请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一，form表单构造

form表单中重要参数：
action：构造的HTTP请求的URL是什么
method：构造的HTTP请求的方法是GET还是POST（ form只支持GET和POST）
input标签中的重要参数：
type：表示输入框的类型，text表示文本，password表示密码
name：表示构造的HTTP请求的query string中的key，query string的value则是用户输入的值
value：input的标签值，对于type为submit类型来说，value则是对应了按钮上显示的文本

1.发送GET请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <form action="http://www.sogou.com" method="get">
        <input type="text" name="text">
        <input type="password" name="password">
        <!-- input type=submit 构造了一个特殊的 提交 按钮 value属性描述了按钮中的文本 -->
        <!-- 点击这个按钮就会触发该 form 表单的"提交操作" 也就是构造http请求发送给服务器 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

页面效果如下：

form表单提交设置请求头,计算机基础学习,http,ajax,开发语言,java,javascript,Powered by 金山文档

假设输入内容为：text=1234 password：111111

抓包后的详细数据（此时请求中的body为空）：

2.发送POST请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <form action="http://www.sogou.com" method="post">
        <input type="text" name="text">
        <input type="password" name="password">
        <!-- input type=submit 构造了一个特殊的 提交 按钮 value属性描述了按钮中的文本 -->
        <!-- 点击这个按钮就会触发该 form 表单的"提交操作" 也就是构造http请求发送给服务器 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

按照GET请求同样的操作进行输入：

抓包后的详细数据（输入的内容存储在请求的body中）：

3.请求和HTTP请求之间的关系

form的action属性对应HTTP请求的URL

form的method属性对应HTTP请求的方法

input的name属性对应queryString的key

input的内容对应queryString的value

4.不同请求之间的区别

GET请求用户输入的内容会被构造成在query string中进行传输，为键值对结构；

POST请求用户输入的内容会被构造成在请求的body中进行传输，为键值对结构.

二，ajax构造

ajax构造HTTP请求的方式比form的功能更加强大，ajax不仅可以构造GET和POST请求，也可以构造PUT,DELETE,OPTIONS等方法的请求；ajax基于异步（异步即当浏览器给服务器发送完请求操作之后，不需要一直等待服务器响应之后再继续执行后续操作，而是可以先往下执行，执行的过程中等待服务器响应完，当服务器给出响应之后，再执行代码内部的回调函数）等待的机制.

1.ajax引入jquery

代码中如何使用ajax：

js原生提供的ajax api，但是原生的api特别难用（一般不用）；

jquery提供的ajax api，该api是针对原生api的封装，较为简单（用的较多）

引入jquery cdn：

下载jquery cdn（网址：https://www.bootcdn.cn/jquery/）

选择.min.js并复制链接

3.打开链接并复制页面中的所有内容

4.创建一个js文件将刚刚复制的内容进行粘贴

5.代码中引入该js文件

注意：

这里也可以直接引入第二步中的.min.js的链接，如下：

但是该方法有一个缺点，当该.min.js网址转移时，次此链接就会失效

2.ajax构造请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入 jquery -->
    <script src="jquery.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: 'https://www.sougou.com?studentName=zhangsan',
            //此处success就声明了一个回调函数，就会在服务器响应返回到浏览器的时候触发该回调
            //正是此处的回调体现了 "异步"
            success: function(data) {
                //data是响应的正文部分
                console.log("服务器响应成功,执行回调函数");
            },
            error: function() {
                console.log("服务器响应失败！");
            }
        });
        console.log("浏览器立即往下执行后续代码");
    </script>
</body>
</html>

执行代码，打开控制台观察：