Javascript Ajax向node/express发布表单数据请求

提前感谢您的阅读。
我试图得到一个简单的示例，将数据发布到node/express服务器。post是从ajax代码执行的，express可以看到请求，我可以从express得到一个响应，返回到ajax代码中。所以这条路是可行的。我不知道的是如何在post请求中传递数据并在express中解析

在express端，我有一个日志语句：

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

它只是告诉我：

   Body: [object Object]

因此，我要么没有在post请求中正确设置数据，要么没有尝试正确解码数据

这是一个问题。我的另一个问题是，当我写这篇文章时，我在express中也看到一个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>

以下是运行并在表单字段中输入12345时看到的

console.log

：

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

因此，即使我的“post”只是使用硬编码数据而不是表单数据，我仍然会收到一个带有我输入的表单数据的“get”请求。post数据显示为[object]

刚刚意识到我在这篇文章中问了两个问题。一个是关于post数据，另一个是关于我没有预料到的额外“GET”。这应该作为两个不同的问题来问吗

[Object Object]

是

Object.toString（）

方法在

req

对象上的结果，因为您在此处将其与字符串连接：

console.log（“Body:+req）

：

是否字符串化对象以打印它：

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

或者简单地使用逗号（控制台将计算值并用

空格分隔em

：

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

req.body

是您的

POST

请求的主体：

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

您收到了一个额外的

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 = {};
  ...
});

---

我认为如果您将

console.log（“Body:+req）

更改为

console.log（req）

，您将看到请求实际上是什么，而不是[object]这是真的。我更改了log语句并获得了数百行输出。我在输出中看到的任何东西都无法帮助我解释可能发生的情况。感谢您提供有关“preventDefault”的提示。这解决了有关意外“get”的问题.关于数据的日志记录，当我使用您的建议：抱歉，不好的评论…当我使用您的建议console.log（“Body:+JSON.stringify（req，null，2））；我得到一个堆栈转储，指示：TypeError：将循环结构转换为JSON”。我想您需要取消注释：

内容类型：application/JSON

有人吗否决投票“你的答案？不知道为什么，它帮助我解决了我的问题。再次感谢。

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