如何从 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) => {
  // ...
})

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

How to give data to the controller file from a html form?

html

forms

routes

view

node.js