logo标签列表

Node.js - 如何从HTML向Express发送数据

htmlnode.jsformsnode.js-clienthttp-post
45

这是HTML表单示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Contact Form</title>
</head>
<body>
<div id="contact">
    <h1>Send an email</h1>
    <form action="/myaction" method="post">
        <fieldset>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" placeholder="Enter your full name" />

            <label for="email">Email:</label>
            <input type="email" id="email" placeholder="Enter your email address" />

            <label for="message">Message:</label>
            <textarea id="message" placeholder="What's on your mind?"></textarea>

            <input type="submit" value="Send message" />

        </fieldset>
    </form>
</div>
</body>
</html>

这是运行在服务器上的Node.js函数：

var sys = require('sys'),
    http = require('http');
    http.createServer(function (req, res) {
            switch (req.url) 
                case '/myaction':
                        res.end(?????);
                    break;
            }
    }).listen(8080);
sys.puts('Server running at http://127.0.0.1:8080/');

我有两个问题：

  1. 如何在html页面中从node.js调用myaction函数？因为html文件运行在80端口，而node.js运行在8080端口（当我尝试将node.js移至80端口时，它会写入“//未处理的'error'事件”）
  2. 在node.js函数中，在哪里放置“?????”，我如何从html表单中获取数据。当我键入req.html.body.name时，我得不到数据...
1
你有没有考虑使用Express？它内置了表单处理程序。我使用它来成功地发布表单。 - Stan Cromlish
2个回答
101

使用http.createServer非常底层，因此原样使用时并不适用于创建Web应用程序。

一个很好的在其上使用的框架是Express，我强烈建议使用它。您可以使用npm install express进行安装。

当您安装好后，可以创建一个基本的应用程序来处理您的表单：

var express = require('express');
var bodyParser = require('body-parser');
var app     = express();

//Note that in version 4 of express, express.bodyParser() was
//deprecated in favor of a separate 'body-parser' module.
app.use(bodyParser.urlencoded({ extended: true })); 

//app.use(express.bodyParser());

app.post('/myaction', function(req, res) {
  res.send('You sent the name "' + req.body.name + '".');
});

app.listen(8080, function() {
  console.log('Server running at http://127.0.0.1:8080/');
});

您可以使用以下方式使您的表单指向它：

<form action="http://127.0.0.1:8080/myaction" method="post">

你不能在端口80上运行Node的原因是已经有一个进程在该端口上运行（它正在提供你的 index.html）。你可以使用Express来使用express.static中间件来提供静态内容，如index.html。

5
@chotesah 这与此处发布的代码无关，而是你应用程序中的问题。 - robertklep
2

我想进一步说明Obertklep的答案。在他的例子中，使用了一个名为body-parser的NPM模块来完成大部分工作。当他使用req.body.name时，我认为他/她是使用body-parser获取在提交表单时接收到的name属性的内容。

如果您不想使用Express，请使用内置的Node模块querystring。请参考下面链接中的答案，了解如何使用querystring的示例。

查看这个答案可能会有所帮助，它非常类似于您的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接