将表单数据发送到Node服务器

Question

将表单数据发送到Node服务器

3

我正在尝试向一个端点发送一些表单数据。

以下是我的客户端代码：

<form name="form" action="http://localhost:8080/geodata" method="post"> 

        <label for="minlat"> MinLat: </label>
        <input type="text" name="MinLat" value="0"><br>
        <label for="maxlat"> MaxLat: </label>
        <input type="text" name="MaxLat" value="1"><br>
        <label for="minlong"> MinLong: </label>
        <input type="text" name="MinLong" value="0"><br>
        <label for="maxlong"> MaxLong: </label>
        <input type="text" name="MaxLong" value="1"><br>

        <button type="submit" class="btn btn-success"> Submit <span class="fa fa-arrow-right"></span></button>

        </form>

    <script>

    $(document).ready(function() {
        $("#form")
            .submit(function(event) {

                var formData = {
                'minLat'            : $('input[name=MinLat]').val(),
                'maxLat'            : $('input[name=MaxLat]').val(),
                'minLong'           : $('input[name=MinLong]').val(),
                'maxLong'           : $('input[name=MaxLong]').val()
                 };

                $.ajax({
                    url: $form.attr('action'),
                    data: formData,
                    cache: false,
                    dataType: 'json',
                    processData: false,
                    type: 'POST',

                    }).done(function(data) {

                        console.log(data);
                    });
                event.preventDefault();
            });
    });
    </script>

我在服务器端代码（express.js）上有一个终端点：

var express = require("express");
var path = require("path");
var bodyParser = require("body-parser"); 

var app = express();
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
  // Initialize the app.
var server = app.listen(process.env.PORT || 8080, function () {
    var port = server.address().port;
    console.log("App now running on port", port);
});

app.post("/geodata", function(req, res) {
    console.log(req.body);
    res.send("hi");
});

我希望将此表单数据发送到端点/geodata，并使用该数据向客户端发送结果。首先，当我点击提交时，在我的终端（即服务器端请求体）中获得一个空的{}。我期望在这个请求体中收到表单值，但没有收到。我该如何确保我的表单值被发送了？

其次，res.send("hi")会将我的初始页面重定向到一个新页面并在那里打印“hi”。由于我已经进行了ajax调用，那么响应只应该被记录下来，网页仍停留在初始页面，对吗？

- robinhood91

你在使用Express中的任何中间件来解析请求体吗？ - markasoftware

@Markasoftware：我已经在服务器端上面包含了我的其余代码。我正在使用body parser。 - robinhood91

如果可能的话，请尝试使用 Formidable - 一个用于解析表单数据，特别是文件上传的 Node.js 模块。(https://www.npmjs.com/package/formidable) - CodingDefined

2个回答

0

dataType: 'json' 表示你期望从服务器返回 JSON 数据。移除 dataType 并添加以下内容：

  data : JSON.stringify(formData),
  contentType: 'application/json',

contentType 是你发送到服务器的数据类型。

- Frederick Mfinanga

谢谢您的纠正。不幸的是，我仍然只能得到一个空的{}来输出console.log(req.body)。 - robinhood91

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- echopeak · Accepted Answer

将表单操作更改为“/geodata”（端点）。

此外，您不需要进行Ajax请求，因为HTML5表单将在按/点击标签时执行请求。

单击提交按钮后，页面将成为从“/geodata”路由发送回的任何响应，并且req.body将返回表示表单数据的对象。