Запрос почты почтальона работает, но почта ajax - нет.Проверял на стороне клиента JS снова и снова - PullRequest
Новая
       12

Запрос почты почтальона работает, но почта ajax - нет.Проверял на стороне клиента JS снова и снова

0 голосов
/ 07 февраля 2019

первый вопрос когда-либо о stackoverflow и мальчик, мне нужен ответ.Моя проблема в том, что у меня есть конечная точка для создания элемента, и она работает, когда я отправляю запрос POST почтальону.Я использую node и express: 

router.post("/", jwtAuth, (req, res) => {
  console.log(req.body);
  const requiredFields = ["date", "time", "task", "notes"];
  requiredFields.forEach(field => {
    if (!(field in req.body)) {
      const message = `Missing \`${field}\` in request body`;
      console.error(message);
      return res.status(400).send(message);
    }
  });
  Task.create({
    userId: req.user.id,
    date: req.body.date,
    time: req.body.time,
    task: req.body.task,
    notes: req.body.notes
  })
    .then(task => res.status(201).json(task.serialize()))
    .catch(err => {
      console.error(err);
      res.status(500).json({ message: "Internal server error" });
    });
});

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

Но когда я отправляю свой запрос ajax, мойКод сервера регистрирует req.body как пустой объект ('{}').Поскольку Почтальон работает, я считаю, что проблема связана с моим клиентским JavaScript, но я просто не могу найти проблему.Я и другие просмотрели это миллион раз, но просто не смогли найти проблему.Вот мой клиентский JavaScript: 

//User submits a new task after timer has run
function handleTaskSubmit() {
  $(".submit-task").click(event => {
    console.log("test");
    const date = $(".new-task-date").text();
    const taskTime = $(".new-task-time").text();
    const task = $(".popup-title").text();
    const notes = $("#task-notes").val();
    $(".task-notes-form").submit(event => {
      event.preventDefault();
      postNewTask(date, taskTime, task, notes);
    });
  });
}

function postNewTask(date, taskTime, task, notes) {
  const data = JSON.stringify({
    date: date,
    time: taskTime,
    task: task,
    notes: notes
  });
//Here I log all the data. The data object and all its key are defined
  console.log(data);
  console.log(date);
  console.log(taskTime);
  console.log(task);
  console.log(notes);
  const token = localStorage.getItem("token");
  const settings = {
    url: "http://localhost:8080/tasks",
    type: "POST",
    dataType: "json",
    data: data,
    contentType: "application/json, charset=utf-8",
    headers: {
      Authorization: `Bearer ${token}`
    },
    success: function() {
      console.log("Now we are cooking with gas");
    },
    error: function(err) {
      console.log(err);
    }
  };
  $.ajax(settings);
}

handleTaskSubmit();

1 Ответ

0 голосов
/ 08 февраля 2019

Что бы я сделал:

  1. Измените заголовок 'application / json' на 'application / x-www-form-urlencoded', поскольку официальные документы не имеютинформация о прежнем.

  2. Прекратите использовать $ .ajax и освоитесь с запросами XHR, так как jquery из CDN иногда является беспорядком, когда CDN get запаздывает, а XHR является нативной реализацией и доступна немедленно,Да, это беспорядок в коде, но вы всегда знаете, что это не внутренняя логика библиотеки, а ваша собственная проблема.Вы слепо используете библиотеку, которая скрывает XHR внутри, и вы не знаете, как задать правильный вопрос «Документы пост-метода XHR», потому что вы еще не знакомы с базовой технологией.

Сохранитьэто и импортировать переменную 

var httpClient = {

        get: function( url, data, callback ) {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                var readyState = xhr.readyState;

                if (readyState == 4) {
                    callback(xhr);
                }
            };

            var queryString = '';
            if (typeof data === 'object') {
                for (var propertyName in data) {
                    queryString += (queryString.length === 0 ? '' : '&') + propertyName + '=' + encodeURIComponent(data[propertyName]);
                }
            }

            if (queryString.length !== 0) {
                url += (url.indexOf('?') === -1 ? '?' : '&') + queryString;
            }

            xhr.open('GET', url, true);
            xhr.withCredentials = true;
            xhr.send(null);
        },

        post: function(url, data, callback ) {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                var readyState = xhr.readyState;

                if (readyState == 4) {
                    callback(xhr);
                }
            };

            var queryString='';
            if (typeof data === 'object') {
                for (var propertyName in data) {
                    queryString += (queryString.length === 0 ? '' : '&') + propertyName + '=' + encodeURIComponent(data[propertyName]);
                }
            } else {
                queryString=data
            }

            xhr.open('POST', url, true);
            xhr.withCredentials = true;
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(queryString);
        }
    };

так же просто, как jquery: httpClient.post (Url, data, (xhr) => {})

Проверьте, есть ли у вас настройка парсера тела в app.js

var bodyParser = require('body-parser'); app.use(bodyParser.json()); // get information from html forms app.use(bodyParser.urlencoded({ extended: true })); // get information from html forms

, если парсер тела настроен, попробуйте изменить заголовокв 'multipart / form-data' или 'text / plain'.

Для справки просто проверьте req.query

Cheers!:)

...