2017-09-22 2 views
0

Je Tring pour envoyer des données de formulaire au noeud js via ajax,
J'utilise express avec analyseur de corps sur le noeud js
Mais je deviens Undefined req. corpsAjax données post de formulaire pour envoyer à exprimer parseur corps js

J'ai cherché tous dans net et essayé beaucoup de choses et rien n'a fonctionné pour moi Veuillez m'aider avec la bonne façon de le faire.

| * | Code HTML:

<html lang="en"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <title>Add</title> 
</head> 
<body> 

    <h1>Welcome to Website </h1> 
    <form id="addUserForm"> 
     <h3> Enter the your details : </h3> 
     Name :<br><input type="text" name="nameView"><br><br> 
     Email :<br><input type="email" name="mailView"><br><br> 
     Mobile :<br><input type="number" name="mobileView"><br><br> 
     <input type="submit" value="Submit"> 
    </form> 

| * | Code Ajax:

| * | J'ai essayé aussi:

var formDataVar = new FormData(); 
formDataVar.append('nameView', input.files[0]); 
formDataVar.append('mailView', input.files[1]); 
formDataVar.append('mobileView', input.files[2]); 

et

var formDataVar = {}; 
$.each($('#addUserForm').serializeArray(), function(i, field) 
{ 
    formDataVar[field.name] = field.value; 
}); 

| * | Noeud Js code:

var express = require("express"); 
var bodyParser = require("body-parser"); 
var app = express(); 

app.listen(8888,function() 
{ 
    console.log("Server Started and Running ..."); 
}); 

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

app.get('/',addUserFormFnc); 
app.post('/addUserFormSubmit',addUserSubmitFnc); 

function addUserFormFnc(req, res) 
{ 
    res.sendFile('addUser.html', {root: __dirname }); 
} 

function addUserSubmitFnc(req, res) 
{ 
    console.log("Data Received : "); 
    var userObjVar = 
    { 
     nameView: req.body.nameView, 
     mailView: req.body.mailView, 
     mobileView: req.body.mobileView 
    }; 
    console.log(userObjVar); 
    res.send(userObjVar); 

} 

+0

Si vous avez des données codées URL, il devrait être disponible sur req.body, non req.data. Pour multipart/form-data, consultez le package middleware multer. – djfdev

+0

désolé modifié ma question. son req.body. J'utilise simplement la forme. action = '/ addUserFormSubmit' fonctionne. mais quand j'envoie d'ajax, ça ne marchera pas –

Répondre

1

La bibliothèque corps-analyseur ne gère pas les données codées avec multipart/form-data. Si vous voulez envoyer ce type de données, vous devriez utiliser quelque chose comme le middleware multer.

Mais dans votre cas, je pense que vous pouvez vous en sortir sans avoir à utiliser l'interface FormData. Vous pouvez simplement réécrire votre code de navigateur en tant que tel:

const $form = $('#addUserForm') 

$form.on('submit', submitHandler) 

function submitHandler (e) { 
    e.preventDefault() 

    $.ajax({ 
    url: '/addUserFormSubmit', 
    type:'POST', 
    data: $form.serialize() 
    }).done(response => { 
    console.log(response) 
    }) 
} 
+0

Pouvez-vous expliquer comment utiliser multer pour les champs uniquement. La documentation explique uniquement les fichiers. –

+1

Voici un exemple de travail complet https://gist.github.com/djfdev/750f2255e2f6f72b2ca5e0636f13d990 – djfdev

+0

Selon les docs multer, tous les champs de texte seront disponibles en tant que propriétés de 'req.body'. Mais encore une fois, vous ne devriez pas avoir besoin d'utiliser cette bibliothèque sauf si vous envoyez des fichiers. – djfdev