Блог

заранее спасибо за чтение.
Я пытаюсь получить простой пример работы с отправкой данных на сервер узла / express. Post выполняется из кода ajax, и express видит запрос, и я могу получить ответ от express в код ajax. Итак, путь работает. Чего я не могу понять, так это как передать данные в post-запросе и проанализировать в express.

на стороне express у меня есть оператор журнала:

    console.log("Body: "   req);
  

и это просто показывает мне:

    Body: [object Object]
  

Итак, я либо неправильно настраиваю данные в post-запросе, либо не пытаюсь их правильно декодировать.

Это одна проблема. Другая проблема, с которой я сталкиваюсь, заключается в том, что когда я делаю post, я также вижу запрос GET в express.

Я искал и искал десятки, если не сотни, сообщений и просто не могу понять, что происходит. На данный момент я как бы полностью связан и изменил так много вещей, что не знаю, близок ли я еще больше.

Чтобы упростить (возможно) Я просто пытаюсь жестко закодировать некоторые данные в коде 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
  

Итак, несмотря на то, что мой «post» использует только жестко запрограммированные данные, а не данные формы, я все равно получаю запрос «GET» с данными формы, которые я ввел. И данные post просто отображаются как [object Object] .

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

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