Ajax 向節點/快遞發送表單數據請求

Question

提前感謝您的閱讀。
我正在嘗試獲得一個將數據發布到節點/快速服務器的簡單示例。 帖子從 ajax 代碼執行，express 查看請求，我可以從 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);

以下是我運行並在表單字段中輸入 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

因此，即使我的“發布”只是使用硬編碼數據而不是表單數據，我仍然會收到一個帶有我輸入的表單數據的“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 );

2. 您有一個額外的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 = {}; ... });