Ajax отправляет запрос данных формы в узел / экспресс

Question

заранее спасибо за чтение.
Я пытаюсь получить простой пример работы по отправке данных на узел / экспресс-сервер.Пост выполняется из кода AJAX и Express видеть запрос, и я могу получить ответ от Express в код AJAX.Так что путь работает.Что я не могу понять, так это как передать данные в запросе на публикацию и проанализировать в экспрессе.

на экспресс-стороне У меня есть лог-оператор:

   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» с формойданные, которые я ввел.И данные поста просто отображаются как [объект Объект].

Только что понял, что задаю два вопроса в этом посте.Один о почтовых данных и один о дополнительном «GET», который я не ожидал.Стоит ли задавать это как два разных вопроса?

Answer 1

1. [Object object] является результатом использования метода Object.toString() для вашего объекта req, поскольку вы связали его со строкой: console.log("Body: " + req):

Стригирует ли объект для его печати:

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

или просто используйте запятую (консоль оценит значения и разделит их с помощью space:

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