Question

我有一个包含两个字段的表单，一个是文本字段，另一个是select字段。提交我发布表格。有人可以告诉我如何使用javasctipt在服务器中检索表单数据。

<form id="createGameForm" action="/createGame" method="post" data-async>
    <div><label for="serverName">Server Name:</label><input type="text" id="serverName"                                 required>
    </div>
    <div>
        <label for="noOfPlayers">Number Of Players:</label>
        <select id="noOfPlayers" required>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
    <input type="submit" value="Create Server" aria-hidden="true" form="createGameForm"    class="btn>
</form>

它是一款Express应用程序。

app.post('/createGame', function (req, res) {
    //how to get data from req object.
    res.render('server.jade');
});

Answer 1

您可以使用正文解析器中间件https://github.com/senchalabs/connect?source=c#middleware

然后对req.body进行发布数据。

Answer 2

对于node.js，如果您使用Express，则至少有busboy（和connect-busboy。我也在研究reformed，它在busboy之上提供了一个层。

Answer 3

根据您的要求，有多种方法可以解决这个问题。

方法1：

您可以使用JavaScript取消表单提交，从表单中读取输入值，然后通过Ajax post请求提交表单。

$('form').submit(function(evt) {
    evt.preventDefault() // This cancels the form request.

    $.ajax({
        type: 'POST',
        url: evt.target.action,
        data: $(evt.target).serialize(),
        success: function(data) {
             // read data here
        }
    });
})

方法2：

您可以将表单指向隐形iframe，然后从iframe中读取。

<form id="createGameForm" action="/createGame" method="post" data-async target="my_iframe">
    ... snip ...
</form>

<iframe name="my_iframe" src="about:blank" style="visibility: hidden;"></iframe>

然后阅读

$('iframe').load(function(evt) {
    var iframe = evt.target
      , doc = iframe.contentWindow.document || iframe.contentDocument || window.frames[iframe.id].document
      , responseText = doc.body.textContent
})

这里有另一个问题，有更多细节：How do you post to an iframe?

方法2的一个警告是，在您处理内容之前，浏览器是打开的，可以使用它。您需要在对text / plain的响应中设置content-type标头，以防止浏览器弄乱它。

免责声明：以上代码未经过测试。

Answer 4

根据您的要求，有多种方法可以解决这个问题。

方法1：

您可以使用JavaScript取消表单提交，从表单中读取输入值，然后通过Ajax post请求提交表单。

$('form').submit(function(evt) {
    evt.preventDefault() // This cancels the form request.

$.ajax({
    type: 'POST',
    url: evt.target.action,
    data: $(evt.target).serialize(),
    success: function(data) {
         // read data here
       }
    });
})

方法2：

您可以将表单指向隐形iframe，然后从iframe中读取。

......剪...

然后阅读

$('iframe').load(function(evt) {
    var iframe = evt.target
      , doc = iframe.contentWindow.document || iframe.contentDocument || window.frames[iframe.id].document
      , responseText = doc.body.textContent
})

这里有另一个问题，有更多细节：你如何发布到iframe？

方法2的一个警告是，在您处理内容之前，浏览器是打开的，可以使用它。您需要在对text / plain的响应中设置content-type标头，以防止浏览器弄乱它。

免责声明：以上代码未经过测试。

以上答案可能有效！

如何在javascript中从post请求中检索数据

4 个答案: