来自 url 中的 query 参数可直接通过 context.query 获取，但 POST 方式提交的表单数据则需要借助中间件的解析来完成，比如 koa-bodyparser。

首先准备好一个表单页面，为了演示，其中包含一个数组类型的数据。

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>post json</title>

  </head>

  <body>

    <form action="/save" method="POST">

      <div>

        <label for="name"

          >name:

          <input type="text" name="name" id="name" value="Tom" />

        </label>

      </div>

      <div>

        <label for="age"

          >age:

          <input type="number" name="age" id="age" value="19" />

        </label>

      </div>

      <div>

        <label

          >hobbies:

          <br />

          <input

            type="text"

            name="hobbies[0]"

            id="hobbies[0]"

            value="reading"

          />

          <br />

          <input type="text" name="hobbies[1]" id="hobbies[1]" value="music" />

          <br />

          <input type="text" name="hobbies[2]" id="hobbies[2]" value="swim" />

        </label>

      </div>

      <button type="submit">Submit</button>

    </form>

  </body>

</html>

server.js

var Koa = require("koa");

var Router = require("koa-router");

var fs = require("fs");

var bodyParser = require("koa-bodyparser");

var app = new Koa();


var router = new Router();

app.use(bodyParser());

router.get("/", async (ctx, next) => {


ctx.type = "html";


ctx.body = fs.createReadStream("index.html");


});

router.post("/save", async (ctx, next) => {


ctx.body = ctx.request.body;


});

app.use(router.routes()).use(router.allowedMethods());


app.listen(3000);

console.log("server started at http:localhost:3000");

通过 Node.js 调试模式启动服务可查看到接收到的数据，其中数据类型解析正常。

$ node --inspect-brk server.js

server started

接收到的表单数据

但其实前台页面提交的并不是 JSON 类型，这是 koa-bodyparse 解析后的结果。通过 Chrome Devtools 的网络面板可看到，真实的类型为 Request 中 Content-Type 字段，为 application/x-www-form-urlencoded。

表单提交时的请求类型为 `application/x-www-form-urlencoded`

原生的 HTML 表单 <form> 是没有 JSON 类型的，其总共有三种默认的格式，

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

默认为 application/x-www-form-urlencoded，可通过 <form> 表单的 enctype 指定。

所以真正意义上以 JSON 格式提交，需要借助 JavaScript，真实场景下表单也大多会走代码提交而非原生 submit 类型的 <button>。

首页更新表单代码添加 onsubmit 方法：

- <form action="/save" method="POST">

+ <form action="/save" method="POST" onsubmit="submitForm(event)" id="myForm">

添加以下代码到页面以提交表单：

<script>

    function submitForm(event) {

        event.preventDefault();

        var formData = new FormData(myForm);

        let data = {};

        for (var [key, value] of formData.entries()) {

            if (key.startsWith("hobbies")) {

            data["hobbies"]

                ? data["hobbies"].push(value)

                : (data["hobbies"] = [value]);

            } else {

            data[key] = value;

            }

        }

    <span class="pl-en">fetch</span>(<span class="pl-s"><span class="pl-pds">"</span>/save<span class="pl-pds">"</span></span>, {

        method<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>POST<span class="pl-pds">"</span></span>,

        headers<span class="pl-k">:</span> {

        <span class="pl-s"><span class="pl-pds">"</span>Content-Type<span class="pl-pds">"</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>application/json<span class="pl-pds">"</span></span>

        },

        body<span class="pl-k">:</span> <span class="pl-c1">JSON</span>.<span class="pl-c1">stringify</span>(data)

    })

        .<span class="pl-c1">then</span>(<span class="pl-k">function</span>(<span class="pl-smi">response</span>) {

        <span class="pl-k">return</span> <span class="pl-smi">response</span>.<span class="pl-en">json</span>();

        })

        .<span class="pl-c1">then</span>(<span class="pl-k">function</span>(<span class="pl-smi">response</span>) {

        <span class="pl-en">console</span>.<span class="pl-c1">log</span>(response);

        });

}




</script>

最后完整的后台与页面代码为：

server.js
 
var Koa = require("koa");

var Router = require("koa-router");

var fs = require("fs");

var bodyParser = require("koa-bodyparser");

var app = new Koa();


var router = new Router();

app.use(bodyParser());

router.get("/", async (ctx, next) => {


ctx.type = "html";


ctx.body = fs.createReadStream("index.html");


});

router.post("/save", async (ctx, next) => {


ctx.body = ctx.request.body;


});

app.use(router.routes()).use(router.allowedMethods());


app.listen(3000);

console.log("server started at http:localhost:3000");
index.html
 
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>post json</title>

  </head>

  <body>

    <form action="/save" method="POST" onsubmit="submitForm(event)" id="myForm">

      <div>

        <label for="name"

          >name:

          <input type="text" name="name" id="name" value="Tom" />

        </label>

      </div>

      <div>

        <label for="age"

          >age:

          <input type="number" name="age" id="age" value="19" />

        </label>

      </div>

      <div>

        <label

          >hobbies:

          <br />

          <input

            type="text"

            name="hobbies[0]"

            id="hobbies[0]"

            value="reading"

          />

          <br />

          <input type="text" name="hobbies[1]" id="hobbies[1]" value="music" />

          <br />

          <input type="text" name="hobbies[2]" id="hobbies[2]" value="swim" />

        </label>

      </div>

      <button type="submit">Submit</button>

    </form>

    <script>

      function submitForm(event) {

        event.preventDefault();

        var formData = new FormData(myForm);

        let data = {};

        for (var [key, value] of formData.entries()) {

          if (key.startsWith("hobbies")) {

            data["hobbies"]

              ? data["hobbies"].push(value)

              : (data["hobbies"] = [value]);

          } else {

            data[key] = value;

          }

        }

        fetch("/save", {

          method: "POST",

          headers: {

            "Content-Type": "application/json"

          },

          body: JSON.stringify(data)

        })

          .then(function(response) {

            return response.json();

          })

          .then(function(response) {

            console.log(response);

          });

      }

    </script>

  </body>

</html>

再次查看提交时的 Content-Type 及所提交的数据，已经是 JSON 格式了。

通过 fetch 提交 JSON 格式的表单数据

Koa 提交和接收 JSON 表单数据的更多相关文章

  1. koa 基础（十一）koa 中 koa-bodyparser 中间件获取表单提交的数据

    1.app.js /** * koa 中 koa-bodyparser 中间件获取表单提交的数据 * 1.npm install --save koa-bodyparser * 2.引入 const ...

  2. Jquery serialize()提交多个表单数据

    ajax提交多个表单数据: 先把不同的表单分别用serialize()函数,然后把序列化后的数据用+拼接提交给后台,具体例子如下 var data1 = $('#form1).serialize(); ...

  3. json化表单数据

    /** * josn化表单数据 * @name baidu.form.json * @function * @grammar baidu.form.json(form[, replacer]) * @ ...

  4. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

  5. SpringMVC中使用bean来接收form表单提交的参数时的注意点

    这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...

  6. struts2自动接收表单数据

    提交页面主要代码: <form method="post" action="messageAction">   <input type=&qu ...

  7. Servlet的5种方式实现表单提交（注册小功能），后台获取表单数据

    用servlet实现一个注册的小功能 ,后台获取数据. 注册页面: 注册页面代码 : <!DOCTYPE html> <html> <head> <meta ...

  8. easyui不提交window中的form表单数据

    <form id="ff" method="post">, <div id="win" class="easyu ...

  9. Struct2提交表单数据到Acion

    Struct2提交表单数据到Action,Action取表单的数据,传递变量.对象 HTML.jsp <form action="reg.do" method="p ...

随机推荐

  1. SpringMVC 简单限流方案设计

    一.概念 限流的目的是通过对并发访问/请求进行限速,或者对一个时间窗口内的请求进行限速来保护系统,一旦达到限制速率则可以拒绝服务.排队或等待.降级等处理. 常用的限流算法有两种:漏桶算法和令牌桶算法: ...

  2. 基于V7的emWin多屏显示方案模板，同时驱动LCD和OLED例程

    说明: 1.多屏驱动跟多图层驱动是类似的,可以使用函数GUI_SelectLayer做切换选择. 2.为了避免OLED闪烁问题,创建一个128*64bit的显存空间,然后使用emWin的GUI_TIM ...

  3. 【Oracle】datafile的resize大小确认方法

    在对Oracle的表进行删除操作的时候,虽然数据被清空了,但是物理上占用的空间却没有被释放掉,这有可能使我们的DB服务器的物理存储始终在增长. 我们在删除用户,表的同时也要对datafile文件进行r ...

  4. APP自动化针对PO模式进行二次封装之basepage

    APP自动化跟WEB自动化所使用的框架基本一样,都是采用的PO模式结合pytest框架编写自动化测试脚本,为了提高代码的复用性.稳定性和易维护性,我们针对PO模式进行了二次封装,将日志,等待以及异常截 ...

  5. windows本地连不上虚拟机redis服务完美解决

    检查本机与虚拟机是否可以互相ping通,如本机IP:192.168.22.111  虚拟机IP:192.168.44.129 (设置虚拟机静态IP已设置) 本机 win+R 输入cmd 进入dos 输 ...

  6. Java描述设计模式(04)：抽象工厂模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.抽象工厂模式 1.生活场景 汽车生产根据用户选择的汽车类型,指定不同的工厂进行生产,选择红旗轿车,就要使用中国工厂,选择奥迪轿车,就要使用 ...

  7. 动态SQL与变量绑定

    有时候动态sql需要进行变量的赋值,这个时候就需要调用系统的存储过程sp_executesql了.使用中还是有些注意事项,代码如下: --字符型字段需声明为NVARCHAR类型 ),) --动态SQL ...

  8. java基础(1):java概述、jdk的安装、环境变量的配置、helloworld案例

    1. Java开发环境搭建 1.1 java概述 众所周知Java是一门编程语言,编程语言就是用来编写软件的.那么使用Java到底能用来编写什么软件呢?你所熟知的很多软件都可以用Java来编写,例如: ...

  9. docker中安装宝塔面板

    我的电脑是win10,安装的virtualbox其上装的ubutun14,ubutun也安装了docker,今天我补充一个完整的操作流程.怎么在docker中安装宝塔面板?先打个岔,这些命令总是记不住 ...

  10. HTML 文件路径

    文件路径描述了网站文件夹结构中某个文件的位置. 文件路径会在链接外部文件时被用到: 网页 图像 样式表 JavaScript 绝对文件路径 绝对文件路径是指向一个因特网文件的完整 URL: 实例 &l ...