如何从 html 表单向控制器文件提供数据？

Question

我是 node.js 和 web 编程的新手，我没有简单的代码来测试我的问题，但我认为问题可能很容易解决，我有一个观点想向控制器文件发送一些信息，这里我将放置视图和其他文件：

index.html.js 的视图：

<form action="ongs">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
</form> 

这里是名为ongs.js的控制器

const KoaRouter = require('koa-router');
var Koa = require('koa');
const router = new KoaRouter();

var app = new Koa();

router.get('ongs', '/', async (ctx) => {
  const skelevar = "hi skel";
  console.log('\n------ get ------');
  await ctx.render('ongs/index', { skelevar });
});

router.post('/ongs', (ctx, next) => {
  console.log('\n--fafafa');
  ctx.body = ctx.request.body;
  console.log('\n--isisisisisisisisi');
});

console.log('\n hi guys');
module.exports = router;
app
  .use(router.routes())
  .use(router.allowedMethods());

这里是 routes.js 文件：

const KoaRouter = require('koa-router');

const hello = require('./routes/hello');
const index = require('./routes/index');
const ongs = require('./routes/ongs');

const router = new KoaRouter();

router.use('/', index.routes());
router.use('/hello', hello.routes());
router.use('/ongs', ongs.routes());

module.exports = router;

我的文件夹的组成如下：

红色箭头显示我向您展示的每个文件的深度

这是视图向我展示的内容：

当我按下提交页面刷新但我在 router.post 中的任何控制台日志都显示在控制台中。 当我在控制台中按下提交时，我得到的唯一消息如下：

 ------ get ------
      --> GET /ongs?fname=John&lname=Doe 200 18ms 609b
    ℹ ｢hot｣: WebSocket Client Connected
      <-- GET /assets/app.js
      --> GET /assets/app.js 200 5ms 1.29mb
      <-- GET /assets/logo.png
      --> GET /assets/logo.png 200 3ms 6.77kb
    ℹ ｢hot｣: WebSocket Client Connected
      <-- GET /ongs?fname=John&lname=Doe
    ------ get ------
      --> GET /ongs?fname=John&lname=Doe 200 18ms 609b
      <-- GET /assets/app.js
      <-- GET /assets/logo.png
      --> GET /assets/app.js 200 5ms 1.29mb
      --> GET /assets/logo.png 200 5ms 6.77kb

Answer 1

表单作为GET 请求提交，这是默认设置，因为您没有在form 标记中传递method 属性。如您所见，数据作为 URL 的一部分发送，后端使用 ongs/index 视图进行响应。在表单标签中传递post 的method 属性以将表单数据作为POST 请求提交。

<form action="/ongs" method="post">
 ...
</form> 

还有一个问题。上述请求将失败并返回 404，因为您没有针对 POST /ongs 的请求处理程序，但您确实有针对 POST /ongs/ongs 的请求处理程序。将 POST 端点路由更新为 /。

router.post('/', (ctx, next) => {
  // ...
})