0

Eu sou completamente novato trabalhando com nodeJs, já vi algumas perguntas semelhantes a minha porém não consegui, e nem entendi direto teria como alguém me da uma ajuda?

No caso estou tentando enviar uma solicitação ajax usando o método post com o nodeJs.

Esse e meu código ajax:

$.ajax({
                    url: "/components/config/action-send-plano",
                    data: { field1: 'valor 001##', field2: 'valor 002##' },
                    type: 'POST',
                    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                    processData: false, // NEEDED, DON'T OMIT THIS
                    beforeSend: function () {
                        $("#" + formName).html(preloaderAzul);
                    },
                    success: function (response) {
                        $("#" + formName).html(response);
                    }
                });

e esta e a rota pra qual ele envia a solicitação

const express = require('express')
const app = express()
const path = require('path')
const handlebars = require('express-handlebars')

// Config
// Template Engine
app.engine('handlebars', handlebars({ defaultLayout: 'main' }))
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'handlebars')

// Add files
app.use(express.static(__dirname + "/"))

// Body Parser
 const bodyParser = require("body-parser")
 app.use(bodyParser.urlencoded({ extended: false }))
 app.use(bodyParser.json())

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// Routes
app.get('/', (req, res) => {
    res.render('landingpage')
})

app.post('/components/config/action-send-plano', function (req, res, next) {
    console.log(req.body)
})

No caso, ele envia, porém não consigo receber os valores do field1 e field2, o console me retorna todos os dados referentes ao parametro req, porém não aparece o resultado dos fields

3
  • Está usando o body-parser?
    – KaduAmaral
    21/10/2019 às 13:37
  • Opa, então, estou sim 21/10/2019 às 13:40
  • Opa acho que o Taffarel já te ajudou, só uma observação, não precisa utilizar os dois app.use(express.json()) e app.use(bodyParser.json()) apenas um dos dois creio que é suficiente. Tem alguns meses que não mexo com Node, então olha na documentação qual o mais atualizado e use apenas ele. O mesmo vale pro urlencoded.
    – KaduAmaral
    21/10/2019 às 14:08

1 Resposta 1

0

O problema está aqui (usando JQuery 3.4.1):

contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS

https://api.jquery.com/jquery.ajax/
Removi as duas chaves acima, e deu certo.


NOTA: contentType, por padrão, é application/x-www-form-urlencoded; charset=UTF-8, então, à medida que você coloca false, ele não envia nesse formato, entende? E no servidor, para receber o conteúdo de post, deve ser nesse formato: application/x-www-form-urlencoded.


req.body
Contém pares de dados-chave de valor enviados no corpo da solicitação. Por padrão, é undefined é preenchida quando você usa middleware de análise de corpo, como express.json() ou express.urlencoded().

Conforme:

app.post('/components/config/action-send-plano', (req, res) => {

let {field1, field2} = req.body;
    console.log(field1)
    console.log(field2)
    res.redirect('/')

//ou também:

console.log(req.param('field1'));
console.log(req.param('field2'));

Exemplo mínimo da documentação:

A seguir é mostradp como usar o middleware de análise de corpo para preencher req.body.

var express = require('express')

var app = express()

app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

app.post('/profile', function (req, res, next) {
  console.log(req.body)
  res.json(req.body)
})

Demo: SEU_ARQUIVO_HTML

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <button id="enviar">Enviar</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#enviar").click(function() {

          $.ajax({
            url: "/components/config/action-send-plano",
            data: { field1: "valor 001##", field2: "valor 002##" },
            type: "POST",
            beforeSend: function() {
              //$("#" + formName).html(preloaderAzul);
            },
            success: function(response) {
             // $("#" + formName).html(response);
            },
          });
        });
      });
    </script>
  </body>
</html>

Express NODE

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');

var indexRouter = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);

app.post('/components/config/action-send-plano', function (req, res, next) {
  let {field1, field2} = req.body;
  res.send(req.body);
})

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Print: inserir a descrição da imagem aqui

7
  • Coloca no console.log(req.body) para ver o que aparece e manda aqui... 21/10/2019 às 13:27
  • no console.log(req.body) retorna isso: {} 21/10/2019 às 13:34
  • Você está usando o express? 21/10/2019 às 13:34
  • Faz o seguinte: edita sua pergunta e cola todo seu código que contém esta parte:app.post('/components/config/action-send-plano', (req, res) => { console.log(req) console.log(req.field1) console.log(req.field2) res.redirect('/') 21/10/2019 às 13:35
  • pronto, alterei 21/10/2019 às 13:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .