请求体继续-学习接口测试平台代码

前言

在上一节中，我们学习了form-data的用法，这一节我们来看下x-www-form-urlencoded。

实现步骤

1. 修改表单元素

首先复制我们form-data的小div的内容到x-www-form-urlencoded的小div里：

<form id="x-www-form-urlencoded-form" action="/post" method="post" enctype="application/x-www-form-urlencoded">
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" name="username">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" name="password">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

2. 修改JavaScript代码

复制好后，我们要改下JavaScript代码：

const form = document.getElementById('x-www-form-urlencoded-form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  const data = new URLSearchParams();
  data.append('username', username);
  data.append('password', password);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/post', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(data);

  xhr.onload = () => {
    if (xhr.status === 200) {
      alert('登录成功');
    } else {
      alert('登录失败');
    }
  };
});

3. 测试

最后，我们来测试一下：

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -d "username=admin&password=123456" http://localhost:8080/post

结语

通过这节课的学习，我们已经基本掌握了form-data和x-www-form-urlencoded的使用方法，接下来我们来看下文件上传。