json格式的请求体和url编码格式（Query String 格式）的请求体

m0_74176885

3855人浏览 · 2023-07-09 11:51:37

m0_74176885 · 2023-07-09 11:51:37 发布

1，在浏览器开发者工具看到的载荷长什么样子？

（1）json格式的请求体（载荷）：{"title":"aaaa","type":1,"account":300,"remarks":"ccccc"}
（2）url编码格式的请求体（载荷）：name=Alice&age=30&email=alice%40example.com
（3）还有form-data格式的请求体，它的请求体和请求头如下图所示。知道长什么样就行了，本篇文章不再讨论form-data格式的请求体了

另外，还有一个Query String 格式，它和url编码格式非常相似，区别就是URL 编码格式对特殊字符和非 ASCII 字符进行了编码，确保它们在 URL 中的正确传输和解析。

以下是五个示例，分别给出了 Query String 格式和 URL 编码格式：

示例一：
Query String 格式：param1=value1&param2=value2
URL 编码格式：param1=value1&param2=value2

示例二：
Query String 格式：name=John Doe&age=30
URL 编码格式：name=John%20Doe&age=30

2，请求头是什么样子？

json格式的请求头：Content-Type: application/json

url编码格式的请求头：Content-Type:application/x-www-form-urlencoded

3，在html代码中怎样发出这两种格式的请求体？

（3.1）json格式的请求，不能通过html的form表单标签发出，一般是通过Ajax通信（包括XMLHttpRequest 和 Fetch API ）

<!--基于XMLHttpRequest发送json请求体 -->

<!DOCTYPE html>
<html>
<head>
  <title>Submit JSON Request</title>
</head>
<body>
  
  <script>
    // 创建一个 JSON 对象
    var data = {
      title: 'aaaa',
      time: '2023-07-09',
      type: 1,
      account: 300,
      remarks: 'ccccc'
    };

    // 将 JSON 对象转换为字符串
    var jsonData = JSON.stringify(data);

    // 创建一个 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://127.0.0.1:3000/account', true);
    xhr.setRequestHeader('Content-Type', 'application/json');

    // 发送请求
    xhr.send(jsonData);
  </script>

</body>
</html>

<!--基于Fetch API发送json请求体 -->


<!DOCTYPE html>
<html>
<head>
  <title>Ajax JSON 请求示例</title>
  <script>
    function submitData() {
      var data = {
        name: "Alice",
        age: 30,
        email: "alice@example.com"
      };

      var jsonData = JSON.stringify(data);

      fetch("http://127.0.0.1:3000/account", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: jsonData
      })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        // 处理成功响应
      })
      .catch(error => {
        console.error(error);
        // 处理错误情况
      });
    }
  </script>
</head>
<body>
  <button onclick="submitData()">提交数据</button>
</body>
</html>

（3.2）url编码格式的请求，可以通过form表单标签发出，也可以通过Ajax通信（包括XMLHttpRequest 和 Fetch API ）发出。

<!--通过form标签发送url编码格式的请求 -->

<!DOCTYPE html>
<html>
<head>
  <title>Submit Form Example</title>
</head>
<body>
  <form action="http://127.0.0.1:3000/account" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <input type="submit" value="Submit">
  </form>
</body>
</html>

<!--通过XMLHttpRequest发送url编码格式的请求 -->

<!DOCTYPE html>
<html>
<head>
  <title>XMLHttpRequest URL Encoded Request</title>
  <script>
    function sendRequest() {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "http://127.0.0.1:3000/endpoint");
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      var data = "param1=" + encodeURIComponent("value1") + "&param2=" + encodeURIComponent("value2");

      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          console.log(xhr.responseText);
          // 处理成功响应
        } else {
          console.error(xhr.statusText);
          // 处理错误情况
        }
      };

      xhr.send(data);
    }
  </script>
</head>
<body>
  <button onclick="sendRequest()">Send Request</button>
</body>
</html>

<!--通过Fetch API发送url编码格式的请求 -->

<!DOCTYPE html>
<html>
<head>
  <title>Fetch API URL Encoded Request</title>
  <script>
    function sendRequest() {
      var url = "http://127.0.0.1:3000/endpoint";
      var data = {
        param1: "value1",
        param2: "value2"
      };

      var encodedData = new URLSearchParams(data).toString();

      fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: encodedData
      })
      .then(function(response) {
        if (response.ok) {
          return response.text();
        } else {
          throw new Error(response.statusText);
        }
      })
      .then(function(result) {
        console.log(result);
        // 处理成功响应
      })
      .catch(function(error) {
        console.error(error);
        // 处理错误情况
      });
    }
  </script>
</head>
<body>
  <button onclick="sendRequest()">Send Request</button>
</body>
</html>

4，后端express解析请求体使用的中间件

app.use(express.json());   //解析json格式的请求体的中间件
app.use(express.urlencoded({ extended: false })); //解析url编码格式的请求体的中间件

另外，两种格式的请求体都可以使用formidable模块解析

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模