ajax 传递请求参数

传统表单提交
Get请求方式
Post请求方式
请求报文

传统表单提交

在Ajax 中，我们需要自己拼接请求参数

1. GET 请求方式

2. POST 请求方式

1. GET 请求

应用：ajax 进行表单提交，服务器端获取请求参数

• 在客户端，我们要把 姓名和年龄 拼接成请求参数的格式
• 格式如下：username=123&age=456
• 在传统表单提交中，请求参数 是自动拼接好的，而ajax 中这个参数需要我们自己去拼接
• 并且，这个参数需要放在 请求地址 的后面

03-传递get请求参数.html 部分代码：

btn.onclick = function() {
            // 2. 在用户点击按钮的时候去创建 ajax 对象，然后去发送请求
            var xhr = new XMLHttpRequest()
            
            // 用户点击按钮的时候，我们也要获取到 两个文本框的值
            var nameValue = username.value
            var ageValue = age.value
    
            // 自己拼接请求参数
            var params = 'username=' + nameValue + '&age=' + ageValue
            
           // 配置 ajax 对象
            xhr.open('get', 'http://localhost:3000/get?' + params)
            
            // 发送请求
            xhr.send()
            
            // 获取服务器端响应的数据
            xhr.onload = function() {
                console.log(xhr.responseText);
            }

        }

app.js 对应代码：

// 对应 03html文件
app.get('/get', (req, res) => {
    // req.query 返回的就是客户端传来的 get请求参数
    res.setHeader("Access-Control-Allow-Origin", "*") // 允许跨域
    res.send(req.query) // 把 get请求参数 响应到客户端
});

浏览器中的 network 显示：

浏览器中的 控制台 显示：

2. POST 请求

• post请求参数要放到 send（）方法中
• xhr.setRequestHeader()方法是用来设置 请求报文当中的报文头信息
• 第一个参数是报文属性名称 ，第二个参数是 报文属性对应的值
• 如果请求参数的类型是：username=123&age=45，则第二个参数是’application/x-www-form-urlencoded’

注意：服务器端要获得post 请求参数，需要借助中间件 body-parser。然后就可以使用 req.body 获得post 请求参数。（以前的方法）

但是，在新的语法中，不再需要body-parser这个中间件了，express框架已经实现了对post 参数的解析。

//express框架已经实现了对post 参数的解析。

const app = express();

// app.use(bodyParser.urlencoded());  这个语法已被弃用

app.use(express.json())
app.use(express.urlencoded({ extended: false }))

并且，获取post参数方法依旧是req.body

04-传递post请求参数.html部分代码：

var params = 'username=' + nameValue + '&age=' + ageValue

            // 配置 ajax 对象
            xhr.open('post', 'http://localhost:3000/post')
            
            // 设置请求参数的格式的类型(post请求必须要设置)
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            
            // 发送请求
            xhr.send(params)
            
            // 获取服务器端响应的数据
            xhr.onload = function() {
                console.log(xhr.responseText);
            }

app.js 对应的代码：

// 对应 04html文件
app.post('/post', (req, res) => {
     res.setHeader("Access-Control-Allow-Origin", "*") // 允许跨域
    res.send(req.body) // 响应给客户端
});

3. 请求报文

在 HTTP 请求和响应的过程中传递的数据块就叫 报文，包括 要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。

• 报文分为 报文头 和 报文体
• 报文头和报文体在请求的过程中，整体被发送到服务器端。

报文头：

• 报文头 中存储的是一些键值对信息，可以理解为：客户端向服务端说的话
• 例如，示例中的 Content-Type 就属于报文头信息

报文体：

• 主要存储一些内容，比如 post请求参数。