Ajax 将表单数据的请求发布到节点/快递

Question

提前感谢您的阅读。
我正在尝试获取一个将数据发布到节点/快速服务器的简单示例。帖子从 ajax 代码执行并表达查看请求，我可以从 express 获取响应返回到 ajax 代码。所以路径有效。我想不通的是如何在post请求中传递数据并在express中解析。

在快递方面我有一个日志声明：

   console.log("Body: " + req);

它只是告诉我：

   Body: [object Object]

所以，我要么没有在发布请求中正确设置数据，要么我没有尝试正确解码。

这是一个问题。我遇到的另一个问题是，当我发帖时，我也看到了一个 GET 请求。

我已经搜索了数十个（如果不是数百个）帖子，但无法弄清楚发生了什么。在这一点上，我有点被束缚了，已经改变了很多事情，我不知道我是否已经接近了。

为了更容易（也许）我只是想在 ajax 代码中硬编码一些数据，而不是使用实际表单中的数据。

    <form id="productKeyForm">
        <div id="keyInput">
            <fieldset>
                <input type="number" id="productKey" name="productKey" />
                <button id="getPrdKey">Submit</button>
            </fieldset>
        </div>
    </form>

    <script>
        $("#getPrdKey").click(function () {
            console.log("ajax submit form entered, key: " + jQuery("#productKey").val());
            var data = {};
            data.title = "title";
            data.msg = "msg";
            $.ajax({
                url: "/submit-form",
                type: "POST",
                //                contentType: 'application/json',
                //                dataType: "json",
                data: JSON.stringify(data),
                success: function (data) {
                    console.log("succes returned in ajax");
                },
                error: function (a, b, c) {
                    console.log("post resulted in failure");
                }

            });
        });
    </script>

还有快递方面：

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

var app = express();    
app.use(bodyParser.json());

app.use(function (req, res, next) {
    console.log(req.method + " request for " + req.url);
    next();
    });

app.use(express.static("./"));  // filesystem???

app.post("/submit-form", function (req, res) {
    console.log("Body: " + req);
    res.send("9999");
});
app.listen(80);

以下是我运行时看到的console.log，在表单字段中输入12345：

Listen on port 80

GET request for /

GET request for /css/styles.css

POST request for /submit-form

Body: [object Object]

GET request for /?productKey=12345

GET request for /css/styles.css

因此，即使我的“帖子”只是使用硬编码数据而不是表单数据，我仍然会收到带有我输入的表单数据的“GET”请求。并且帖子数据只是显示为 [object Object]。

刚刚意识到我在这篇文章中问了两个问题。一篇关于发布数据，一篇关于我没想到的额外“GET”。这应该作为两个不同的问题来问吗？

Answer 1

1. [Object object] 是您的 req 对象上的 Object.toString() 方法的结果，因为您已将其与此处的字符串连接起来：console.log("Body: " + req):

是否字符串化一个对象来打印它：

console.log( "Body: " + JSON.stringify(req, null, 2) );

或者简单地使用逗号（控制台将评估值并用space分隔em：

console.log("Body: ", req );

req.body 是您的 POST 请求的正文：

 console.log("Body: ", req.body );

1. 您有一个额外的GET 请求，因为这是浏览器 在点击submit 按钮时提交表单的默认行为。如果你想自己处理表单提交（在这里你已经完成了），你首先应该阻止表单提交然后自定义它：

   $("#getPrdKey").click(function (e) {
     // prevent form submission
     e.preventDefault();
     // custom submit
     console.log("ajax submit form entered, key: " + jQuery("#productKey").val());
     var data = {};
     ...
   });