Почему я получаю два выхода, один из которых не определен?

Question

Я сделал кнопку для отправки некоторых данных POST с помощью Jquery.Он просто отправляет «имя»: «Кевин» через JSON.

$(document).ready(function() {
    $('#clickMe').on('click', function() {
        var data = {};
        data.name="kevin";
        $.ajax({
            type: "POST",
            data: JSON.stringify(data),
            contentType: 'application/json'
        });
    });
});

Мой сервер берет это и перекачивает вывод в console.log

const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var port = 8080;


app.use(express.static('public'));
app.use(bodyParser.json());

app.post('/', (req, res) => {

    console.log(req.body.name);
});


app.listen(port);
console.log('Listening on http://localhost:' + port)

Моя проблема в том, что console.log (req.body.name) выводит ДВА вещи вместоодин ... и я не уверен почему.Мой вывод на консоль выглядит следующим образом:

Kevin 
Undefined

Answer 1

Код, который вы показываете, хорош.Вы должны предоставить HTML-часть, чтобы быть уверенным.

Одна из причин, по которой вы могли бы получить такой результат, заключается в том, чтобы иметь такой код:

<form action='/' method="post">
  <button id="clickMe" type="submit">submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $('#clickMe').on('click', function() {
      var data = {};
      data.name = "kevin";
      $.ajax({
        type: "POST",
        data: JSON.stringify(data),
        contentType: 'application/json'
      });
    });
  });
</script>

Здесь запрос AJAX будетотправлено (с data.name = "kevin"), тогда форма также будет отправлена ​​(без свойства data.name, поэтому undefined value).

Решение в этом случае состоит в том, чтобы предотвратить отправку формы с event.preventDefault(); или return false;:

$(document).ready(function() {
  $('#clickMe').on('click', function(e) {
    e.preventDefault();
    var data = {};
    data.name = "kevin";
    $.ajax({
      type: "POST",
      data: JSON.stringify(data),
      contentType: 'application/json'
    });
    // OR
    // return false;
  });
});

Вы также можете просто удалить часть формы и просто нажать кнопку: <button id="clickMe">click here</button>.Здесь форма не будет отправлена, поэтому нет необходимости event.preventDefault(); или return false;.

Вы также можете просто использовать форму, добавив ввод и удалив свою часть JS, но это будет просто классическаяотправка формы.

Answer 2

Ваш API в порядке, поместите ответ на app.post () и попробуйте.Проверьте вашу DOM, если есть два события или что-то в этом роде.